Angular Cannot find control with path

Issue

I'm trying to build a nested reactive form with formArray, but i get error: 'Cannot find control with path', it works fine if there is only one item in array, but if there is more that 1 it returns error. what am i doing wrong?

carPartCategories in ngfor is just data i get from server.

    <form [formGroup]="updateEstimation">
      <ng-container formArrayName="carPartStatus">
        <ng-container *ngFor="let i of carPartCategories; let j = index;">
            <ng-container [formGroupName]="j">
              <div class="content-desc mt-4 mb-5">
                <div class="row mt-4 parts-row align-items-center">
                  <div class="col-lg-2">
                    <span class="p-2 nusx">
                      {{i.carPartCategory}}
                    </span>
                  </div>
                  <div class="col-lg-3">
                    <span class="p-2 nusx">
                      {{i.carPartSubCategory}}
                    </span>
                  </div>
                  <div class="col-lg-2">
                    <span class="p-2 nusx">
                      <mat-form-field appearance="fill">
                        <mat-label>choose</mat-label>
                        <mat-select formControlName="status">
                          <mat-option>
                            test
                          </mat-option>
                        </mat-select>
                      </mat-form-field>
                    </span>
                  </div>
                  <div class="col-lg-2">
                    <span class="p-2 nusx">
                      X{{i.quantity}}
                    </span>
                  </div>
                  <div class="col-lg-2 price">
                    <input type="text" placeholder="price" class="form-control" formControlName="price">
                  </div>
                </div>
              </div>
              <div class="comment mt-4 mb-5" *ngIf="i.comment">
                <p class="mtav">comment</p>
                <p class="nusx">{{i.comment}}</p>
              </div>
              <hr>
            </ng-container>
          </ng-container>
        </ng-container>
       </form>

.ts

      this.updateEstimation = this.fb.group({
        carPartStatus: new FormArray([
          new FormGroup({
            status: new FormControl(''),
            price: new FormControl('')
          })
        ])
      });

StackBlitz: https://stackblitz.com/edit/angular-10-material-reactive-form-starter-bc7hd4?file=src/app/app.component.ts

Solution

That's happening because you added only one item under the FormArray, and looped through another array carPartCategories to render the items.

For each item in the carPartCategories array, the FormArray of carPartStatus should contain an item as a FormGroup, and keep the FormArray always synced with your original array by adding/removing the controls to it.

You can try something like the following:

// prop represents the `carPartStatus` control
carPartStatusCtrl: FormArray;

//...


this.carPartStatusCtrl = this.createFormArray(carPartCategories);

this.updateEstimation = this.fb.group({
  carPartStatus: this.carPartStatusCtrl,
});

// ...

// Create a `FormArray` from the provided array:
createFormArray(origin: CarPartCategories[]) {
  return new FormArray(
    origin.map(
      (item) =>
        new FormGroup({
          status: new FormControl(item.status),
          price: new FormControl(item.price),
        })
    )
  );
}

Each change on the original array should be reflected into the FormArray, for example, if you add a new item to the original array, a new item should be added to the FormArray like the following:

appendNewItem(item: CarPartCategories): void {
  this.carPartStatusCtrl.push(
    new FormGroup({
      status: new FormControl(item.status),
      price: new FormControl(item.price),
    })
  );
}

Update

Based on your StackBlitz, you're receiving the original array from the HTTP request, but you initialized the updateEstimation form-group without waiting the result to return, so your FromArray in this case won't contain any items since the carPartCategories is still empty.

To resolve this issue, you have to:

• Either move the updateEstimation initialization to be within the subscribe function (and DON'T render the template until the updateEstimation is being initialized, by using *ngIf="updateEstimation" on the form element).
• Or append the new items to the carPartStatusCtrl form-array, once the data is received using the appendNewItem function I mentioned above in my solution.

Answered By - Amer