Error: Cannot find control with name: Angular FormArray

publicado por: Anonymous

Eetoy intentando hacer un reactive form en Angular 8 pero al hacer la relación en el HTML obtengo 2 errores.

1) error Cannot find control with texts:
2) Cannot read property ‘controls’ of null.

el codigo del componente es el siguiente:

Componente.ts

myForm: FormGroup;
  constructor(
    private fb: FormBuilder
  ) {}

ngOnInit() {
    this.myForm = this.fb.group({
      name: '',
      texts: this.fb.array([]),
    });
}


get texts() : FormArray {
    return this.myForm.get("texts") as FormArray
  }

  newtext(): FormGroup {
    return this.fb.group({
      respuestas_valor: '',
    })
 }
 addText() {
  this.texts.push(this.newtext());
}



removetext(i:number) {
  this.texts.removeAt(i);
}

onSubmit1() {
  console.log(this.myForm.value);
}

y mi html es el siguiente:

<form [formGroup]="myForm" (ngSubmit)="onSubmit1()">

    <div *ngIf="p.codigo_tipopreguntas == 1">
                                <div formArrayName="texts">
                                  <div *ngFor="let tex of texts.controls; let i = index" formGroupName="{{i}}">
                                    <mat-form-field>
                                      <input formControlName="respuestas_valor" type="text" matInput value="">
                                    </mat-form-field>
                                  </div>
                                </div>
                              </div>
</form>

Alguna solución o sugerencia para este error.
Muchas Gracias

solución

El atributo texts no es una variable, sino un identificador de algún elemento de tu HTML

this.myForm = this.fb.group({
    name: '',
    texts: this.fb.array([])//Aquí solo le asignar un valor de inicio al elemento que tenga formControlName="texts" en tu html
});

Cannot read property ‘controls’ of null. ese error te sale porque no tienes una variable que se llame texts y que dentro tenga un atributo llamado controls

Pero si quisieras poder hacer let tex of texts.controls; en tu ngFor tendrías que tener la un let texts que contenga el atributo controls

en el ts agrega

texts =  {
    controls : 'valor de controls'
}

Con eso ya puedes hacer el let tex of texts.controls de hecho los 2 errores es por lo mismo de que no tienes una variable text con el atributo controls.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *