我是Angular 2的初学者.我正在尝试创建一个具有动态表单的表,创建表并且值也绑定但是我无法访问formControlName中的值,尝试下面的代码但它不起作用.
有人可以帮助我在下面的代码我做错了
<tbody formArrayName="tiMetable"> <tr *ngFor="let child of tiMetableForm.controls.tiMetable.controls; let i = index;" [formGroupName]="i"> <td *ngFor="let period of child.controls.periods.controls;let j = index;" [formGroupName]="j"> {{period.controls.day.value}} <!-- bind is working fine --> <input type="text" [formControlName]="day"> <!-- error --> </td> </tr> </tbody>
TS
ngOnInit(){
this.tableForm = this.formBuilder.group({
tiMetable: this.formBuilder.array([
this.formBuilder.group({
periods: this.formBuilder.array([
this.formBuilder.group({
subject_id:10,timing_id:11,day:'Monday'
}),this.formBuilder.group({
subject_id:10,day:'Tuesday'
}),day:'Wednesday'
}),day:'Thursday'
}),day:'Friday'
})
])
}),this.formBuilder.group({
periods: this.formBuilder.array([
this.formBuilder.group({
subject_id:10,name:'Thursday'
})
])
})
])
});
提前致谢.
解决方法
我注意到的第一件事
this.formBuilder.group({
subject_id:10,name:'Thursday'
^^^^
it should be day
})
其次,为什么在组件中创建tableForm时在模板中使用tiMetableForm？
第三,你应该使用formControlName =“day”而不是注释中提到的[formControlName] =“day”.
最后,您忘记将您的子数组包装在formArrayName =“periods”中.为此,您可以使用ng-container,如下所示：
<table [formGroup]="tableForm">
<tbody formArrayName="tiMetable">
<tr *ngFor="let child of tableForm.controls.tiMetable.controls; let i = index;" [formGroupName]="i">
<ng-container formArrayName="periods">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
add this
<td *ngFor="let period of child.controls.periods.controls;let j = index;" [formGroupName]="j">
{{period.controls.day.value}}
<input type="text" formControlName="day">
</td>
</ng-container>
</tr>
</tbody>
</table>
