I have an input which I can fill dynamically through a request to an API or manually, the problem occurs when I try to send the value of the input, when it has been filled dynamically it sends me an empty value ... I am a beginner in Angular
This is my input HTML
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Nombres del Clientes" [(value)]="clienteMkw.datos[0].nombre" name="nombres_cliente" [(ngModel)]="ordenServicio.nombres_cliente">
"clienteMkw" in [(value)] is my object that get the API response
When i try to send the data of the input fill manually on json object it works
{
nombres_cliente: "ADUCARGAS (AEROPUERTO)"
}
But this is when the inputs are filled dynamically
{
nombres_cliente: ""
}
I don't know what am i doing wrong... :s
Here is my TS file
export class CrearOrdenComponent implements OnInit {
usuarios: any = [];
tipoOrdenes: any = [];
ordenServicio: any = {
idestatus_orden: 1,
idtipo_orden: 0,
idusuario: 0,
nombres_cliente: '',
telefono_cliente: '',
movil_cliente: '',
direccion_cliente: '',
ppp_user: '',
ppp_pass: '',
idtipo_falla: 0,
fecha_reporte : Date,
fecha_asig: Date,
fecha_ejecucion: Date,
hora_inicio: 0,
hora_fin: 0,
diagnostico_inicial: '',
diagnostico_final: '',
calificacion: 0
}
clienteMkw: any = [];
data: string;
postData: Consulta = {
token: 'eURGUHVuY2ZSbWkweXNXbVlVT0pZZz09',
idcliente: 0
};
constructor(
private _servicio: MaterialesService,
private _servicioCliente: ClientesService) { }
ngOnInit() {
this._servicio.getUsuarios().subscribe(
res => {
this.usuarios = res
console.log(res)
},
err => console.error(err)
);
this._servicio.getTipoOrden().subscribe(
res => {
this.tipoOrdenes = res
},
err => console.log(err)
);
}
sendId(){
this._servicioCliente.getCliente(this.postData).subscribe(
data => {
console.log(this.postData)
this.clienteMkw = data
console.log(data)
},
err => console.error(err)
);
}
crearOrden(){
this._servicio.saveOrden(this.ordenServicio).subscribe(
res => {
console.log(res)
console.log(this.ordenServicio)
},
err => console.error(err)
)
}
}
and my HTML file
<div class="container">
<div class="card text-left mb-3">
<form>
<div class="card-header">
Obtener Cliente
</div>
<div class="card-body">
<p class="card-text">Ingrese el código Mkw del cliente para obtener sus datos..</p>
<input type="text" class="form-control" id="exampleFormControlInput1" name="idcliente"
[(ngModel)]="postData.idcliente" placeholder="Ej. 1713">
</div>
<div class="card-footer">
<button class="btn btn-primary" (click)="sendId()">Obtener Mkw</button>
</div>
</form>
</div>
<div class="card text-left">
<div class="card-header">
Orden de Servicio
</div>
<div class="card-body">
<form>
<div class="row my-2">
<div class="col-md-4">
<label for="calendario">Fecha de Asignación</label>
<input class="form-control" id="calendario" type="date" class="type" name="fecha_asig" [(ngModel)]="ordenServicio.fecha_asig">
<input class="form-control" id="calendario" type="date" class="type" name="fecha_reporte" [(ngModel)]="ordenServicio.fecha_reporte">
</div>
<div class="col-md-4">
<label for="">Tipo de Orden</label>
<select class="form-control" id="" name="idtipo_orden" [(ngModel)]="ordenServicio.idtipo_orden">
<option *ngFor="let tipoOrden of tipoOrdenes" [ngValue]="tipoOrden.idtipo_orden">
{{tipoOrden.descripcion}}
</option>
</select>
</div>
<div class="col-md-4">
<label for="tecnicos">Técnico Asignado</label>
<select class="form-control" id="tecnicos" name="idusuario" [(ngModel)]="ordenServicio.idusuario">
<option *ngFor="let usuario of usuarios" [ngValue]="usuario.idusuario">
{{usuario.nombres_usuario}}
</option>
</select>
</div>
</div>
<div class="row my-2">
<div class="col-md-8">
<label for="exampleFormControlInput1">Cliente</label>
<input type="text" class="form-control" id="exampleFormControlInput1"
placeholder="Nombres del Clientes" name="nombres_cliente" [(ngModel)]="clienteMkw.datos[0].nombre">
</div>
<div class="col-md-4">
<label>Estatus</label>
<select class="form-control" id="tecnicos">
<option>{{clienteMkw.datos[0].estado}}</option>
<option>Activo</option>
<option>Suspendido</option>
</select>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<label for="exampleFormControlInput1">Dirección</label>
<input type="text" class="form-control" placeholder="Dirección"
[(ngModel)]="clienteMkw.datos[0].direccion_principal" name="direccion_cliente">
</div>
</div>
<div class="row my-2">
<div class="col-md-4">
<label for="">Teléfono 1</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder=""
[(ngModel)]="clienteMkw.datos[0].telefono" name="telefono_cliente">
</div>
<div class="col-md-4 offset-md-4">
<label for="">PPPoE User</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder=""
[(ngModel)]="clienteMkw.datos[0].servicios[0].pppuser" name="ppp_user">
</div>
</div>
<div class="row my-2">
<div class="col-md-4">
<label for="">Teléfono 2</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder=""
[(ngModel)]="clienteMkw.datos[0].movil" name="movil_cliente">
</div>
<div class="col-md-4 offset-md-4">
<label for="">PPPoE Password</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder=""
[(ngModel)]="clienteMkw.datos[0].servicios[0].ppppass" name="ppp_pass">
</div>
</div>
<div class="row my-3">
<label for="te">Requerimiento</label>
<textarea class="form-control" name="" id="te" cols="12" name="diagnostico_inicial" [(ngModel)]="ordenServicio.diagnostico_inicial"></textarea>
</div>
<div class="card-footer text-muted">
<button class="btn btn-primary" (click)="crearOrden()">Generar</button>
</div>
</form>
</div>
</div>
</div>
