Angular 2 Reactive Forms cannot find control

Question

Im new with Reactive Forms and Im trying to make a component that has indicadores with 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's always throwing the exception:

ERROR Error: Cannot find control with name: 'label'
ERROR Error: Cannot find control with name: 'value'

And I dont have any idea why...

console.log(indicadoresFormArray);

public customForm: FormGroup; constructor(private fb: FormBuilder) { this.customForm = this.fb.group({ label : [null], value : ['', Validators.required] }) } Try this — Ushma Joshi
– Ushma Joshi, Commented Jun 14, 2017 at 11:36

AVJT82 · Accepted Answer · 2017-06-14 17:31:27Z

5

There was some issues with your template, missing a few formArrayName's and formGroupName's.

Each FormArray needs to have marked in template formArrayName="the name of the array" and if you are having nested FormGroup's inside the array they need to be marked in this case with the index (which you get from the iteration of the FormArray), like so: [formGroupName]="i" or formGroupName="{{i}}".

So your template should look like the following:

<!-- 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>

PLUNKER

edited Jun 14, 2017 at 17:31

answered Jun 14, 2017 at 15:05

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

PriNcee Over a year ago

Thanks for your reply, im getting the error: ERROR Error: Cannot find control with path: '0 -> label'

AVJT82 Over a year ago

Could you provide a working plunker to showcase the issue and I'd be happy to take a look at it. Much easier to help when you have something to test :)

PriNcee Over a year ago

I was trying to make a plnkr but is not working, this is actually my work: plnkr.co/edit/w7wJNRKmwwLkkN3AgUy3?p=preview following your instructions of my previous answer

AVJT82 Over a year ago

Well it's not working as you said, you are at least initForm function in the plunker :)

AVJT82 Over a year ago

Seems all plunkers is not working for me, so I cannot fork my plunker to show you. But you should be able to do the following inside the iteration of indicadores: <h5>{{ctrl.value.IndicadorNombre}}</h5> and the div:<div *ngIf="ctrl.value.predefined">It's true!</div>

|

Collectives™ on Stack Overflow

Angular 2 Reactive Forms cannot find control

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related