Angular 2 Reactive forms cannot find control
Im new with reactive forms and Im trying to create a component with indicadores
c answers
:
With this component:
addAnswers(indicador: Indicador, answer?: any):void {
const indicadoresFormArray = <FormArray>this.customForm.controls['indicadores'];
let label = answer ? answer.label : '';
let value = answer ? answer.value : '';
let superi = 0;
for(let i = 0; i < indicadoresFormArray.length; i++) {
if(indicadoresFormArray.value[i].id == indicador.id) {
superi = i;
}
}
(<FormArray>(<FormGroup>(indicadoresFormArray).controls[superi])
.controls['answers']).push(
new FormGroup({
label: new FormControl(label),
value: new FormControl(value)
})
)
}
And the template
<div *ngFor="let indicador of customForm.controls['indicadores'].controls">
<div class="row" *ngFor="let answer of indicador.controls['answers'].controls">
<div class="input-field col m5 s6"><input formControlName="label" placeholder="Etiqueta" /></div>
<div class="input-field col m5 s6"><input formControlName="value" placeholder="Valores" /></div>
<div class="input-field col m2 s12 center-align">
<button type="button" class="btn-floating waves-effect waves-light" (click)="addAnswer()"><i class="material-icons">add</i></button>
</div>
</div>
</div>
It always throws an exception:
ERROR Error: Cannot find control with name: 'label'
ERROR Error: Cannot find control with name: 'value'
And I have no idea why ...
console.log (indicadoresFormArray);
source to share
There were problems with your template, several were missing formArrayName
and formGroupName
.
Each FormArray
must be marked in the template formArrayName="the name of the array"
, and if you have it nested FormGroup
inside the array, then in that case you need to mark that index with an index (which you get from iterating FormArray
), for example: [formGroupName]="i"
or formGroupName="{{i}}"
.
So your template should look like this:
<!-- Mark formarray before iteration -->
<div formArrayName="indicadores">
<!-- Mark formGroupName in a div inside iteration or on the same line -->
<div *ngFor="let ctrl of customForm.get('indicadores').controls; let i = index" formGroupName="{{i}}">
<label>Predefined</label>
<input type="checkbox" formControlName="predefined">
<!-- Again mark the formarray.... and formgroupname below that -->
<div formArrayName="answers">
<div *ngFor="let cont of ctrl.controls.answers.controls; let j=index" formGroupName={{j}}>
<input formControlName="label" placeholder="Etiqueta" />
<input formControlName="value" placeholder="Valores" />
</div>
</div>
</div>
</div>
source to share