具有阵列的角4反应形式

问题描述 投票:0回答:1

更新 下面的代码很好。还有另一个函数调用重置mainForm的控件导致错误。

我试图将html模板绑定到反应形式。但我收到以下错误:

ERROR Error: Cannot find control with path: 'forms -> 0'

以下是我正在使用的文件和模板。

component.ts

mainForm = new FormGroup({
  forms: new FormArray([]),
});

...

buildForm() {
  for ( let i = 0; i < this.items.length; i++ ) {
    const fg = new FormGroup({
      active: new FormArray([]),
      price: new FormArray([]),
      moq: new FormArray([]),
    });
    this.items[i].orderBy.forEach(o => {
      (<FormArray>fg.get('active')).push(new FormControl(false));
      (<FormArray>fg.get('price')).push(new FormControl({ value: '', disabled: true }, [Validators.required]));
      (<FormArray>fg.get('moq')).push(new FormControl({ value: '', disabled: true }, [Validators.required]));
    });

    (<FormArray>this.mainForm.get('forms')).push(fg);
  }
}

HTML

<div [formGroup]="mainForm">
  <div formArrayName="forms">
    <div formGroupName=0>
    </div>
  </div>
</div>

formGroupName=0只是一个临时测试。它应该看起来像<div [formGroupName]="row.$$index">,可能被ngx-datatable消耗。

但我不明白为什么它说控制没找到,当它在那里我控制台登录表格时。表单也是在生成行之前构建的。

angular
1个回答
0
投票

试试这种方式:

<div [formGroup]="mainForm">
  <div formArrayName="forms">
    <div *ngFor="let form of mainForm.controls['forms'].controls; let i = index", [formGroupName]="i">
    </div>
  </div>
</div>

希望对你有帮助!

© www.soinside.com 2019 - 2024. All rights reserved.