Angular 4 动态表单组

Question

我正在尝试创建一个动态表单组，我正在尝试实现这一目标

在添加更多点击添加 2 个动态字段 我正在调用这个函数：

onAddSurgeries(){
    const control = new FormGroup({
        'surgery': new FormControl(null),
        'illness': new FormControl(null)
    });
      (<FormArray>this.form.get('surgeries')).push(control);
}

这就是我的 html 的样子：

<tr *ngFor="let ctrl of form.get('surgeries')['controls']; let i = index">
   <td><input type="text" class="form-control" [formControlName]="ctrl['controls'].surgery"></td>
   <td><input type="text" class="form-control" [formControlName]="ctrl['controls'].illness"></td>
</tr>

我知道我正在做的错误，formControlName 不应该是“ctrl['controls'].surgery”当我只有一个 formcontrol 而不是 formgroup 中的 2 个控件时，我应该将“i”作为 formcontrolname ，但在这种情况下，我不知道应该在 formControlName 中输入什么 因为当我提交表单时，两个输入的值都是空的，因为它没有与表单组控件同步

Answer 1

您缺少（至少从问题中）formArrayName 的标记。此外，您正在将表单组推送到您的表单数组，模板中的表单组需要在迭代中用索引值进行标记。那么您的formControlNames 就是您指定的名称，即surgery 和illness：

<table>
  <ng-container formArrayName="surgeries">
    <tr *ngFor="let ctrl of form.get('surgeries')['controls']; let i = index" 
      [formGroupName]="i">
      <td><input type="text" class="form-control" formControlName="surgery"></td>
      <td><input type="text" class="form-control" formControlName="illness"></td>
    </tr>
  </ng-container>
</table>

DEMO