FormArray. Cannot find control with path

Question

I want to output a form in which one field is an array, and for each element of the array I need to output my inputs.

Component:

ngOnInit() {
  const fb = this.fb;
  this.editForm = this.fb.group({
    country: fb.control(null),
    identifiers: this.fb.array([
       this.fb.group({
         codeIdentifier: fb.control(null),
         numIdentifier: fb.control(null),
       })
    ]),
 });
 this.organizationService.getOneById(this.id).subscribe((organization: Organization) => {
    let ids: any[] = [];
    organization.identifiers.forEach(item => {
       let id: any = { "codeIdentifier": "", "numIdentifier": "" };
       id.codeIdentifier = item.typeIdentifier.code;
       id.numIdentifier = item.numIdentifier;
       ids.push(id);
    });
     this.editForm.setControl('identifiers', this.fb.array(ids || []));
 })
}

HTML:

<div [formGroup]="editForm">
  <ng-container formArrayName="identifiers">
    <ng-container *ngFor="let identifier of identifiers.controls; let i=index" [formGroupName]="i">
      <input type="text" formControlName="codeIdentifier">
      <input type="text" formControlName="numIdentifier">
    </ng-container>
  </ng-container>
</div>

Got error:

Cannot find control with path: 'identifiers -> 0 -> codeIdentifier'

why are you using `div` with `formControlName`? change that to `input` — jmdavalos, Oct 25 '18 at 12:50
I would recommend change `formControlName="typeIdentifier"` to `formControlName="codeIdentifier"` on your html template — Daniel C., Oct 25 '18 at 13:03
@AymenKanzari have you solved your problem. my problem is if single formgroup is added to a form array, shows `Cannot find control with path`. but if multiple formgroup or no formgroup added there is no error. — suhailvs, May 07 '20 at 06:22

EfiBN · Answer 1 · 2019-10-17T09:19:41.880

4

Pay attention to set it with the group inside the array as you built it, like that:

this.editForm.setControl('identifiers',
  this.fb.array(ids.map(
      id => this.fb.group({codeIdentifier: id})
    ) || [])
);

this.editForm.setControl('identifiers',
  this.fb.array(ids.map(
      id => this.fb.group({numIdentifier: id})
    ) || [])
);

I didn't entirely understood your Objects structure, but this is the way to build the Control Array back to view for Edit/Update purposes.

edited Oct 17 '19 at 09:19

answered Oct 15 '19 at 00:08

EfiBN

408
2
11

Thank you for the answer :) ... I was passing array of objects ( [{text: 'asfd'}] ) and not array of form groups of such objects - for example like this: arrayOfObjects.map(obj => this.formBuilder.group(obj)) ... :) – pesho hristov Mar 06 '20 at 11:39
1

Thank you I have been sleepless on wondering what's wrong. This answer solved my problems. I owe you a nice cup of coffee – shifter May 18 '20 at 02:48

score 2 · Answer 2 · answered Oct 25 '18 at 13:12

identifiers is nothing in your code (well the name of a property of a formArray)

You can choose

1.-put a getter in your .ts

get identifiers()
{
    return this.editForm.get('identifiers") as FormArray
}

2.-change your .html

<ng-container *ngFor="let identifier of editForm.get('identifiers").controls;
           let i=index" [formGroupName]="i">

FormArray. Cannot find control with path

2 Answers2

Linked