Angular Form Array Cannot find control with path

Question

I have mapped the formcontrolname but still can't detect it? what seems to be the problem?

here's my html form code

<form [formGroup]="purchaseOrderForm">
    <div class="row">
        <!-- vendor -->
        <div class="col-md-6" *ngIf="showVendor">
            <div class="form-group">
                <!-- <input type="text" formControlName="inputVendor" class="form-control" placeholder="Vendor"> -->
                <ng-select [items]="vendorListHolder" formControlName="inputVendor" class="custom"></ng-select>
            </div>
        </div>
        <!-- Order Number -->
        <div class="col-md-6">
            <div class="form-group">
                <input type="text" formControlName="inputOrderNumber" class="form-control"
                        placeholder="Order Number">
                </div>
            </div>
            <!-- Address -->
            <div class="col-md-6">
                <div class="form-group">
                    <input type="text" formControlName="inputAddress" class="form-control" placeholder="Address">
                    </div>
                </div>
                <!-- Payment Status -->
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" formControlName="inputPaymentStatus" class="form-control"
                        placeholder="Payment Status">
                        </div>
                    </div>
                    <!-- Total Paid -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="number" formControlName="inputTotalPaid" class="form-control"
                        placeholder="Total Paid">
                            </div>
                        </div>
                        <!--  Total Amount -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="number" formControlName="inputTotalAmount" class="form-control"
                        placeholder="Total Amount">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div (click)="addItemFields()">asdasdasd</div>
                                <!-- start of table -->
                                <div class="table-responsive">
                                    <table class="table align-items-center table-flush">
                                        <thead class="thead-light">
                                            <tr scope="row">
                                                <th scope="col">Item Name</th>
                                                <th scope="col">Quantity</th>
                                                <th scope="col">Price &nbsp; &nbsp; &nbsp; &nbsp; </th>
                                                <th scope="col">Sub Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr scope="row" formArrayName="itemForm" *ngFor="let group of itemsArray.controls; let i = index;" [formGroupName]="i">
                                                <th scope="col">
                                                    <div class="media align-items-center">
                                                        <!-- item-->
                                                        <div *ngIf="showItems">
                                                            <div class="form-group">
                                                                <ng-select (change)="onSelectedItem()" [items]="itemListHolder" class="custom" formControlName="itemSelected"></ng-select>
                                                                <!-- [(ngModel)]="itemSelected" -->
                                                                <!-- [ngModelOptions]="{standalone: true}" -->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th scope="col">
                                                    <div class="form-group">
                                                        <input type="number" formControlName="inputQuantity" class="form-control" placeholder="Quantity">
                                                        </div>
                                                    </th>
                                                    <th scope="col">
                                                        <div class="form-group">
                                                            <input type="number" formControlName="inputPrice" class="form-control" placeholder="Price asdasdasd">
                                                            </div>
                                                        </th>
                                                        <th scope="col">
                                                            <div class="form-group">
                                                                <input type="number" formControlName="inputSubTotal" class="form-control" placeholder="Sub Total">
                                                                </div>
                                                            </th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <!-- end of table -->
                                        </div>
                                        <button class="btn btn-icon btn-3 btn-success" type="button" (click)="test()">
                                            <span class="btn-inner--icon">
                                                <i class="ni ni-fat-add"></i>
                                            </span>
                                            <span class="btn-inner--text">Save</span>
                                        </button>
                                        <button class="btn btn-icon btn-3 btn-danger" type="button" (click)="addPurchase()">
                                            <span class="btn-inner--icon">
                                                <i class="ni ni-fat-add"></i>
                                            </span>
                                            <span class="btn-inner--text">Cancel</span>
                                        </button>
                                    </div>
                                </form>

here's my code for my component.ts

addPurchase(){

 this.purchaseOrderForm = this.fb.group({
        inputOrderNumber: [''],
        inputVendor: [this.vendorSelected],
        inputAddress: [''],
        inputPaymentStatus: [''],
        inputTotalPaid: [''],
        inputTotalAmount: [''],
        itemForm: this.fb.array([this.addItemGroup()])

}

 addItemGroup(){
    return this.fb.group({
        itemSelected: [],
        inputQuantity: [],
        inputPrice: [],
        inputSubTotal: []
    });

  }

  addItemFields(){
      this.itemsArray.push(this.addItemGroup());
  }

  remoteItemFields(index){
    this.itemsArray.removeAt(index);
  }

  get itemsArray(){
    return <FormArray>this.purchaseOrderForm.get('itemForm') as FormArray;
  }

the test() method is for console only. I was just trying to get to see the value in the console

I've put the input fields inside a table so I hope it doesn't matter

Please help :( trying to figure it out for hours now.

btw I can dynamically add fields even with the error

Answer 1

I assume you are talking about the below line of code

<tbody>
------><tr scope="row" formArrayName="itemForm" *ngFor="let group of itemsArray.controls; let i = index;" [formGroupName]="i">
       .....your other code
    </tr>
</tbody>

Here is the Angular Forms Array documentation

https://angular.io/api/forms/FormArrayName#description

According to the documentation, the *ngFor loop should be a child of the element with the formArrayName attribute. So try putting the formArrayName="itemForm" in the tbody element.

So it would look like this

<tbody formArrayName="itemForm">
    <tr scope="row" *ngFor="let group of itemsArray.controls; let i = index;" [formGroupName]="i">
       .....your other code
    </tr>
</tbody>