Question

我试图在另一个formarray中显示表单数组，但它给了我一个错误，无法读取属性＆＃39;控件＆＃39;未定义的

这是我的代码

addInventoryFormGroup() {
    this.addInventoryForm = this.fb.group({
        addInventoryFieldsList: this.fb.array([this.buildAddInventoryFields()]),
    });
}

buildAddInventoryFields(): FormGroup {
    return this.fb.group({
        buildTableFields: this.fb.array([this.buildAddInventoryTableFields()]),
        quantity: '',
        section: '',
        row: '',
    })
}

buildAddInventoryTableFields(): FormGroup {
    return this.fb.group({
        unitCost: '',
        faceValue: '',
    })
}

get addInventoryFieldsList(): FormArray {
    return <FormArray>this.addInventoryForm.get('addInventoryFieldsList');
}

这是我的html代码

<form [formGroup]="addInventoryForm">
     <div class="reactive-form" formArrayName="addInventoryFieldsList" *ngFor="let address of addInventoryFieldsList.controls; let i = index;">
          <div [formGroupName]="i">
               <div formArrayName="buildTableFields" *ngFor="let fields of addInventoryFieldsList.controls.buildTableFields.controls; let x = index;">
                    <span [formGroupName]="x">ABC</span>
               </div>   
          </div>
     </div>
</form>

请帮我解决此错误

Answer 1

因为我没有看到你宣布addInventoryFieldsList我怀疑这是你的问题。

您应该写addInventoryForm.controls.addInventoryFieldsList进行访问 addInventoryFieldsList FormArray控件。

以下内容对您有用：

<form [formGroup]="addInventoryForm">
    <div class="reactive-form" formArrayName="addInventoryFieldsList" *ngFor="let address of addInventoryForm.controls.addInventoryFieldsList.controls; let i = index;">
        <div [formGroupName]="i">
            <div formArrayName="buildTableFields" *ngFor="let fields of address.controls.buildTableFields.controls; let x = index;">
                <span [formGroupName]="x">ABC</span>
            </div>
        </div>
    </div>
</form>

另请注意，我使用address.controls.buildTableFields.controls循环嵌套控件

<强>更新

事实证明，您已经定义了addInventoryFieldsList getter。所以这里是更新的模板：

<form [formGroup]="addInventoryForm">
    <div class="reactive-form" formArrayName="addInventoryFieldsList" *ngFor="let address of addInventoryFieldsList.controls; let i = index;">
        <div [formGroupName]="i">
            <div formArrayName="buildTableFields" *ngFor="let fields of address.controls.buildTableFields.controls; let x = index;">
                <span [formGroupName]="x">ABC</span>
            </div>
        </div>
    </div>
</form>

<强> Ng-run Example

Answer 2

这篇文章可能对你有所帮助...... https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/ 请务必在使用前加载表单

ngOnInit() {
   this.addInventoryForm = this.fb.group({
    addInventoryFieldsList: this.fb.array([this.buildAddInventoryFields()]),
   });
}... follow with your methods

HTML

   <form [formGroup]="addInventoryForm">
 <div class="reactive-form" formArrayName="addInventoryFieldsList" *ngFor="let address of addInventoryForm.get('addInventoryFieldsList').controls; let i = index;">
      <div [formGroupName]="i">
           <div formArrayName="buildTableFields" *ngFor="let fields of addInventoryForm.get('addInventoryFieldsList').controls; let x = index;">
                <span [formGroupName]="x">ABC</span>
           </div>   
      </div>
 </div>

Answer 3

请检查可能不是ts文件中声明的变量的addInventoryFieldsList。

在Angular6中的另一个FormArray中显示FormArray

3 个答案: