1

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

1 respuesta 1

1

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.

2
  • disculpa amigo, al agregar texts = { controls : 'valor de controls' } con que reemplazaria 'valor de controls'?
    – Kenny Cruz
    el 7 may. 2020 a las 13:47
  • El valor de controls es lo que tú necesitas, en tu HTML tienes esto <div *ngFor="let tex of texts.controls; let i = index" formGroupName="{{i}}"> Que en el ngFor sacas los valores de texts.controls y los guarda en texts, pero ahí en tu código no lo estás usando para nada, esa información ya depende de lo que necesites el 7 may. 2020 a las 15:25

Tu Respuesta

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

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