es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Establecer datos en FormArray en formulario reactivo de Angular.

17 Jul, 2023 Programación

Tengo un FormGroup que contiene una matriz de formulario a la cual quiero establecer una matriz de datos obtenidos de una API, pero aparentemente no lo logro por completo.

Formulario

this.blog = this.fb.group({
    title: ['', Validators.required],
    description: ['', Validators.required],
    date: [date, [Validators.required, this.dateValidator]],
    companyId: ['', Validators.required],
    isActive: [false],
    paragraphs: this.fb.array([])
});

paragraphs(): FormArray {
return this.blog.get(“paragraphs”) as FormArray
}

newParagraph(): FormGroup {
return this.fb.group({
section: ”
})
}

addParagraph() {
this.paragraphs().push(this.newParagraph());
}


Aquí intento establecer los valores

```typescript
this.blog.setControl('paragraphs', this.fb.array(this.blogUpdate.paragraphs || []));

Código HTML

<tr *ngfor="let paragraph of paragraphs().controls; let i = index" [formgroupname]="i">
    <td colspan="2">
        Parrafo:
        <textarea formcontrolname="section" (change)="saverange($event, paragraph.value.paragraphId, i)" [value]="paragraph.value.section" type="text" rows="7" class="form-control"></textarea>
    </td>
</tr>

Resultado

enter image description here

Error

enter image description here

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Según el código proporcionado, parece que el error se produce porque blogUpdate.paragraphs no es una instancia de FormArray. Para solucionar este problema, debes crear una nueva instancia de FormArray y establecer sus valores utilizando los datos recuperados de la API.

    Así es como puedes modificar tu código:

    const paragraphsArray = new FormArray([]);
this.blog.setControl('paragraphs', paragraphsArray);

if (this.blogUpdate.paragraphs && this.blogUpdate.paragraphs.length > 0) {
  this.blogUpdate.paragraphs.forEach((paragraph) => {
    paragraphsArray.push(this.fb.group({
      section: paragraph.section
    }));
  });
}

    Este código crea una nueva instancia de FormArray y la establece como el valor del campo paragraphs en el formulario blog. Luego, recorre los datos recuperados de la API (this.blogUpdate.paragraphs) y agrega un nuevo FormGroup a paragraphsArray para cada párrafo.

    Al hacer esto, deberías poder establecer los valores del campo paragraphs con los datos recuperados de la API sin errores.

Comments are closed.