我正在尝试创建一个动态表单组,我试图实现这一目标
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>
