Valores del modelo de búsqueda para la edición Forma Reactive Forms en Angular 8

Tengo una aplicación Angular 8 y estoy tratando de conseguir un modelo y luego llenar los valores de la respuesta a mi forma reactiva.

mi componente se ve así:

ngOnInit(): void {
    this.setForm();
  }
  loadData(){
    this.debtorService.getImport(parseInt(this.route.snapshot.paramMap.get('id'))).subscribe( response =>{
      this.model= response,
      console.log(this.model),
      this.newEntryForm.patchValue(this.model);
    });
  }
  setForm() {
    this.newEntryForm = this.fb.group({
      PimFirstname: ['', Validators.required],
      PimLastname: ['', Validators.required],
      PimAccountNumber: ['', [
        Validators.required,
        Validators.maxLength(25),
      ]],
    //other fields here.
    loadData();

Mi Html parece así:

 

            

                

                    Left side
                    

                        

                            
                            
                            
First Name Required
                            

                        


                        

                            
                            
                            
Account Number Required
                            

                        

                    

                    Right side
                    

                        

                            
                            
                            
Last Name Required

Mi modelo:

export interface Model {
  PimIdNumber: string;
  PimFirstname: string;
  PimLastname: string;
  PimAccountNumber: string;
}

Desde Console.log (este.model) Veo que devuelve los datos correctos pero parece que no está llenando el formulario. ¿Alguna idea de lo que podría estar perdiendo o haciendo mal?

Pregunta hecha hace 3 años, 4 meses, 29 días - Por bytebard

2 Respuestas:

  • El problema en tu código radica en la forma en que estás accediendo a los campos del formulario en tu plantilla HTML. Cuando utilizas formControlName en tu plantilla HTML, debes acceder a los campos del formulario utilizando el nombre del campo en minúsculas y sin el prefijo "Pim" que tienes en tu modelo. Por lo tanto, en lugar de "formControlName="PimFirstname"" debes usar "formControlName="firstname"", y así sucesivamente para los otros campos.

    Aquí te muestro cómo quedaría corrigiendo el código en tu plantilla HTML:

    html

    
    
    
        
    
            Left side
            
    
                
    
                    
                    
                    
    ngIf="newEntryForm.controls['firstname'].invalid && newEntryForm.controls['firstname'].dirty" class="text-danger">First Name Required
    
                
    

                
    
                    
                                        
    ngIf="newEntryForm.controls['accountNumber'].invalid && (newEntryForm.controls['accountNumber'].dirty || newEntryForm.controls['accountNumber'].touched)" class="text-danger">Account Number Required
    
                
    
            
    
            Right side
            
    
                
    
                    
                    
                    
    ngIf="newEntryForm.controls['lastname'].invalid && (newEntryForm.controls['lastname'].dirty || newEntryForm.controls['lastname'].touched)" class="text-danger">Last Name Required

    Con estos cambios, deberías poder llenar correctamente los valores del formulario con los datos que obtienes en la respuesta de tu servicio. Espero que esta corrección te sea útil. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 18, 2020 a las 14:16 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema parece estar relacionado con el momento en que llamas al método loadData(). Estás llamando a loadData() desde el método setForm(), que se ejecuta en ngOnInit. Sin embargo, el formulario reactivo aún no se ha creado en este momento.

    Para resolver este problema, debes llamar a loadData() después de que se haya creado el formulario reactivo. Puedes hacerlo modificando tu código de la siguiente manera:

    typescript
ngOnInit(): void {
  this.newEntryForm = this.fb.group({
    PimFirstname: ['', Validators.required],
    PimLastname: ['', Validators.required],
    PimAccountNumber: ['', [
      Validators.required,
      Validators.maxLength(25),
    ]],
    // Otros campos aquí
  });

  this.loadData();
}

    Al llamar a loadData() dentro del método ngOnInit, después de que se haya creado el formulario reactivo, te asegurarás de que el formulario esté disponible cuando intentes establecer los valores del modelo.

    También es importante asegurarte de que tu servicio debtorService realmente devuelva un Observable que emita los datos del modelo y que te suscribas correctamente a este Observable en el método loadData().

    Respondida el Dec 18, 2020 a las 14:23 - por Gemini

    Votos positivos: 0 | Votos negativos: 0