Cambie mi código de ngModel a ReactiveForms () para agregar validaciones. Pero ahora el valor de 'distrito' se muestra en el html solo a veces de forma aleatoria. Console log siempre muestra el valor. Creo que es un problema con los http gets. Tengo que esperar a que termine 'this.ubigeoService.listaDistritos' antes de asignar un valor a 'distrito'. ¿Cómo podría resolver esto?
export class UbigeoService {
constructor(private http:HttpClient) { }
listarDepartamento(): Observable<string[]>{
return this.http.get<string[]>(baseUrl+"/listaDepartamentos");
}
listaProvincias(paramDep:any): Observable<string[]>{
return this.http.get<string[]>(baseUrl+"/listaProvincias/"+paramDep);
}
listaDistritos(paramDep:any,paramProv:any): Observable<Ubigeo[]>{
return this.http.get<Ubigeo[]>(baseUrl+"/listaDistritos/"+paramDep+"/"+paramProv);
}
}
busca(cliente: Cliente) {
this.ubigeoService
.listaProvincias(cliente.ubigeo?.departamento)
.subscribe((response) => (this.provincias = response));
this.ubigeoService
.listaDistritos(
cliente.ubigeo?.departamento,
cliente.ubigeo?.provincia
)
.subscribe((response) => (this.distritos = response));
this.clienteForm.patchValue({
idCliente: cliente.idCliente,
nombres: cliente.nombres,
apellidos: cliente.apellidos,
correo: cliente.correo,
direccion: cliente.direccion,
estado: cliente.estado,
ubigeo: {
idUbigeo: cliente.ubigeo?.idUbigeo,
departamento: cliente.ubigeo?.departamento,
provincia: cliente.ubigeo?.provincia,
distrito: cliente.ubigeo?.distrito
},
});
console.log(this.clienteForm.get('ubigeo').get('distrito').value);
}
En los 3 select, cuando eligo un departamento, me trae las provincias con un evento change, asimismo esto para los distritos. Este es un Modal para actualizar clientes, solo he copiado la parte de los select. Al dar click en un boton editar, llama a la funcion 'busca' y rellena automáticamente los campos del modal con el contenido de una grilla.
<div class="row" style="margin-top: 5%" formGroupName="ubigeo">
<div class="col-lg-4">
<label for="id_act_departamento">Departamento</label>
<select formControlName="departamento" (change)="cargaProvincia()"
id="id_act_departamento" name="departamento" class="form-control">
<option value="">[Seleccione]</option>
<option *ngFor="let aux of departamentos" value="{{ aux }}">
{{ aux }}
</option>
</select>
</div>
<div class="col-lg-4">
<label for="id_act_provincia">Provincia</label>
<select formControlName="provincia" (change)="cargaDistrito()" id="id_act_provincia"
name="provincia" class="form-control">
<option value="">[Seleccione]</option>
<option *ngFor="let aux of provincias" value="{{ aux }}">
{{ aux }}
</option>
</select>
</div>
<div class="col-lg-4">
<label for="id_act_distrito">Distrito</label>
<select formControlName="idUbigeo" id="id_act_distrito" name="distrito"
class="form-control">
<option value="">[Seleccione]</option>
<option *ngFor="let aux of distritos" value="{{ aux.idUbigeo }}">
{{ aux.distrito }}
</option>
</select>
</div>
</div>
UPDATE: Si agrego setTimeout al patchValue ya no ocurre el error.
setTimeout(() => {
this.clienteForm.patchValue({
idCliente: cliente.idCliente,
nombres: cliente.nombres,
apellidos: cliente.apellidos,
correo: cliente.correo,
direccion: cliente.direccion,
estado: cliente.estado,
ubigeo: {
idUbigeo: cliente.ubigeo?.idUbigeo,
departamento: cliente.ubigeo?.departamento,
provincia: cliente.ubigeo?.provincia,
distrito: cliente.ubigeo?.distrito
},
});
}, 1000);
GitHub (Front, Back y BD) https://github.com/frnkdmn/DAW2BackEndTemp https://github.com/frnkdmn/DAW2FrontEndTemp