Angular 4动态表单组

发布时间：2020-12-17 17:36:44 所属栏目：安全来源：网络整理

导读：我正在尝试创建一个动态表单组,我试图实现这一目标在添加更多单击添加2动态字段我调用这个函数： onAddSurgeries(){ const control = new FormGroup({ 'surgery': new FormControl(null),'illness': new FormControl(null) }); (FormArraythis.form.get('s

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

enter image description here

在添加更多单击添加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’].手术”当我在一个表单组中只有一个formcontrol而不是2个控件时,我应该把“i”作为formcontrolname,但是在这个我不知道应该在formControlName中输入什么
因为当我提交表单时,两个输入的值都是空的,因为它没有与formgroup控件同步

解决方法

你缺少(至少从问题上)formArrayName的标记.此外,您正在将表单组推送到您的formarray,在模板中需要使用迭代中的索引值进行标记.然后你的formControlNames只是你指定的名字,即手术和疾病：

<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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!