Angular 表单数组找不到带路径的控件

Question

我已经映射了formcontrolname但还是检测不到？似乎是什么问题？

这是我的 html 表单代码

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

这是我的 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;
  }

test() 方法仅适用于控制台。我只是想在控制台中查看值

我已将输入字段放在 table 中，所以我希望它没关系

请帮忙 :( 现在想弄明白几个小时了。

顺便说一句，即使有错误我也可以动态添加字段

Answer 1

我假设你在谈论下面的代码行

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

这是 Angular Forms Array 文档

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

根据文档，*ngFor 循环应该是具有 formArrayName 属性的元素的子元素。所以尝试将 formArrayName="itemForm" 放在 tbody 元素中。

所以它看起来像这样

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

Angular 表单数组找不到带路径的控件

Angular Form Array Cannot find control with path

angular

angular-reactive-forms

angular-forms

formarray