Angular 如何在ngFor（嵌套formArray）中访问ngFor中的formControlName？

我是Angular 2的初学者。我正在尝试创建一个具有动态表单的表，表已创建，值也已绑定，但我无法访问formControlName中的值，在下面的代码中尝试过，但它不起作用

有人能帮我在下面的代码中哪里做错了吗

HTML

<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>

提前谢谢。

我注意到的第一件事

this.formBuilder.group({
      subject_id:10,
      timing_id:11,
      name:'Thursday'
      ^^^^
 it should be day
})

其次，在组件中创建

tableForm

时，为什么要在模板中使用

timetableForm

第三，您应该使用

formControlName=“day”

而不是评论中提到的

[formControlName]=“day”

最后，您忘记将子数组包装在

formarayname=“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>

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
加上这个
{{period.controls.day.value}

---

只要使用

formControlName=“day”

而不是

[formControlName]=“day”

@TanDuong已经尝试过这个方法，但是如果可以将代码添加到plunker中，它会显示此错误“错误：无法找到路径为：'Timedam->Timedam'”的控件。

<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>