Как получить доступ к formControlName в ngFor внутри ngFor (вложенный formArray)?

Question

Я новичок в 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>

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,
                            timing_id:11,
                            day:'Tuesday'
                        }),
                        this.formBuilder.group({
                            subject_id:10,
                            timing_id:11,
                            day:'Wednesday'
                        }),
                        this.formBuilder.group({
                            subject_id:10,
                            timing_id:11,
                            day:'Thursday'
                        }),
                        this.formBuilder.group({
                            subject_id:10,
                            timing_id:11,
                            day:'Friday'
                        })
                    ])
                }),
                this.formBuilder.group({
                    periods: this.formBuilder.array([
                        this.formBuilder.group({
                            subject_id:10,
                            timing_id:11,
                            day:'Monday'
                        }),
                        this.formBuilder.group({
                            subject_id:10,
                            timing_id:11,
                            day:'Tuesday'
                        }),
                        this.formBuilder.group({
                            subject_id:10,
                            timing_id:11,
                            day:'Wednesday'
                        }),
                        this.formBuilder.group({
                            subject_id:10,
                            timing_id:11,
                            name:'Thursday'
                        })
                    ])
                })
            ])
         });

Заранее спасибо.

Answer 1

Первое, что я заметил

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

Во-вторых, почему вы используете timetableForm в шаблоне, пока вы создали tableForm в компоненте?

В-третьих, вы должны использовать 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>

Ng-run Пример