3

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

13
  • podrías agregar en tu pregunta el templete y el código que usaste en los servicios así me parece se entendería mejor el problema.PatchValue se usa solo para un subset de elementos de un FormGroup or FormArray,,SetValue requiere estructura exacta del objeto sin el resto del codigo no entiendo bien tu problema
    – nestdan
    Commented el 15 nov. 2021 a las 17:51
  • quizás iniciando desde ngOnInit() el this.clienteForm.patchValue
    – nestdan
    Commented el 15 nov. 2021 a las 17:56
  • @nestdan trate de copiar todo el código posible para hacerlo mas entendible, quizas lo suba a github. Commented el 15 nov. 2021 a las 18:15
  • ok yo intentaria usar primero SetValue para valores inicilaes para todo el Form luego PatchValue para update en Nested ubigeo{} tambien tendria en cuenta ngOnInit() y revisaria si el uso del operador ? no afecta para esto usaria Disabling type checking using $any() lik para uso de PatchValue tektutorialshub.com/angular/setvalue-patchvalue-in-angular
    – nestdan
    Commented el 15 nov. 2021 a las 18:37
  • no había visto el uso de setTime probaste tambien con forkjoin --link>careydevelopment.us/blog/…
    – nestdan
    Commented el 15 nov. 2021 a las 18:45

2 respuestas 2

0

Puedes crear un getter y un setter para detectar cuando las operaciones esten terminadas:

_datosCargados = 0;
  set datosCargados(value: number) {
    this._datosCargados = value;
    console.log(value);
    //Si nuestro contador llega a tres, signifca que las 3 operaciones
    // que definimos terminaron su carga.
    if (this._datosCargados === 3) this.crearFormulario();
  }

  get datosCargados() {
    return this._datosCargados;
  }
  
  //Creamos una cache de los datos para acceder a ellos posteriormente. 
  departamentos = [];
  provincias = [];
  distritos = [];

  constructor(private ubigeoService: UbigeoService) {}
  
  //Ejecutamos todo cuando el componente este listo. 
  ngOnInit(): void {
    this.ubigeoService.listarDepartamento().subscribe((x) => {
      this.departamentos = x;
      this.datosCargados++;
      this.carga('departamentos');
    });
    this.ubigeoService.listaProvincias({}).subscribe((x) => {
      this.provincias = x;
      this.datosCargados++;
      this.carga('provincias');
    });
    this.ubigeoService.listaDistritos(null, null).subscribe((x) => {
      this.distritos = x;
      this.datosCargados++;
      this.carga('distritos');
    });
  }

  leyenda = '....Cargando departamentos, provincias, distritos';
  carga = (texto) => (this.leyenda = this.leyenda.replace(texto, ''));
  crearFormulario() {
    this.leyenda = 'Se muestra el formulario';
  }

La carga podría ser a solicitud (al desplegar cada una de las opciones ), pero en lo personal prefiero cargar todos los datos, siempre y cuando no representen un problema por el tamaño.

Te dejo un ejemplo funcional aquí

Los observables son operaciones asincronas y la forma en que se ejecutan no corresponde al orden en que son escritas, depende del tiempo de respuesta del servidor, tráfico en la red, y demás chunches que hay en la red. Hay que escribir código extra para asegurarse de que la operación esta terminada antes de utilizar sus datos, de ahí la estructura que te propongo.

0

// crud-cliente.component.ts
        distritos$!:Observable<Ubigeo[]>
        private distritoSelectedSubject = new BehaviorSubject<string>('');
        userSelectedAction$ = this.distritoSelectedSubject.asObservable();
        
        onSelected(event: Event): void {
            // event:InputEvent??
            // or <HTMLInputElement>event.target
            let userName = (event.target as HTMLInputElement).value;
            this.distritoSelectedSubject.next(userName)
        
          }
        
        cargaDistrito() {
            let dep = this.clienteForm.get('ubigeo').get('departamento').value
            let pro = this.clienteForm.get('ubigeo').get('provincia').value
            if(!dep || !pro) return
          this.distritos$=  this.ubigeoService
              .listaDistritos(dep, pro)
              .pipe(
                tap(data=>console.log('distitos',JSON.stringify(data))),
                catchError(err => throwError('Error occurred'))
              )
          }
        busca(cliente: Cliente) {
        
            ......
        .......
              this.distritos$= this.ubigeoService
              .listaDistritos(
                cliente.ubigeo?.departamento,
                cliente.ubigeo?.provincia
              )
              .pipe(
                tap(data=>console.log('distitos',JSON.stringify(data))),
                catchError(err => throwError('Error occurred'))
              )
        .....
        .....
        }
//para ver cambios 
            this.clienteForm.get('ubigeo').get('departamento').
                valueChanges.subscribe(  
                  (      value: any)=> {  
                     console.log(JSON.stringify(value));  
                  }  
               );  
                           ngOnInit(){
                             this.ubigeoService
                          .listarDepartamento()
                          .subscribe((response) => (this.departamentos = response));
                        this.clienteForm = this.fb.group({
                          idCliente: [0],
                          nombres: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(20)]],
                          apellidos: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(20)]],
                          correo: ['', [Validators.required,Validators.email]],
                          direccion: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(20)]],
                          estado: [1],
                          ubigeo: this.fb.group({
                            idUbigeo: ['', [Validators.required]],
                            departamento: ['', [Validators.required]],
                            provincia: ['', [Validators.required]],
                            distrito: [''],
                          }),
                        });
                        
                            recibido$= forkJoin([
                            this.ubigeoService .listaProvincias
                        (cliente.ubigeo?.departamento),
                         this.ubigeoService .listaDistritos
                         ( cliente.ubigeo?.departamento, cliente.ubigeo?.provincia ) ])
                          ]).pipe(
                           
                            map(([provincias,distritos ]) => ({
                             // objetoM segun modelo deseado
                            }) as objetoM)
                          )
                          // html
                          {{recibidos$ | async | json}
                        }
// crud-cliente.component.html
        <h1>Seleccionaste :{{distritoSelectedAction$ | async | json}}</h1>
        
        <div class="col-lg-4" *ngIf='distritos$ |async as distritos'>
                                            <label for="id_reg_distrito">Distrito</label>
        <select formControlName="idUbigeo" id="id_reg_distrito" name="distrito"
                          class="form-control">
                           (change)="onSelected($event)"
                             <option value="">[Seleccione]</option>
            <option *ngFor="let aux of distritos" value=" aux.idUbigeo ">
                                                    {{ aux.distrito }}
                               </option>
          </select>
                            <div *ngIf="clienteForm.get('ubigeo').get('idUbigeo').invalid && (clienteForm.get('ubigeo').get('idUbigeo').dirty || clienteForm.get('ubigeo').get('idUbigeo').touched)"
                                            class="alert alert-danger" style="margin-top: 5px;">
                                                <div *ngIf="clienteForm.get('ubigeo').get('idUbigeo').errors.required">Distrito es requerido.</div>
                                            </div>
                                        </div>
        

1
  • 1
    ¿Esto es una respuesta? Si vas a pedir aclaración o hacer comentarios, evita usar el espacio de respuestas para eso. Te sugiero que elimines esta no respuesta. Saludos Commented el 15 nov. 2021 a las 20:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.