javascript - Angular2 嵌套 formGroups - formArrays 和模板绑定(bind)

Question

问题是这样的:

我有一个带有嵌套表单组的复杂表单，这是它的“简化”结构:

-> MyForm (formGroup)
    -> Whatever01 (formControl - input)
    -> Whatever02 (formControl - input)
    -> WhateverGroup01 (formGroup)
        -> Whatever03 (formControl - input)
        -> Whatever04 (formControl - input)
    -> WhateverArray01 (formArray)
        -> WhateverGroup02 (formGroup)
            -> Whatever05 (formControl - input)
            -> WhateverGroup03 (formGroup)
                -> Whatever06 (formControl - input)
        -> WhateverGroup04 (formGroup)
            -> Whatever07 (formControl - input)
    -> ...

Angular 方面，它应该看起来像这样(不正确/完整，但只是给出一个想法):

this.myForm = this.fb.group({
    whatever01: ['',Validators.compose([...])],
    whatever02: ['',Validators.compose([...])],
    whateverGroup01: this._formBuilder.group({
        whatever03: ['',Validators.compose([...])],
        whatever04: ['',Validators.compose([...])]
    }),
    whateverArray01: this._formBuilder.array([
        this._formBuilder.group({
            whatever05: ['',Validators.compose([...])],
            whateverGroup03: this._formBuilder.group({
                whatever06: ['',Validators.compose([...])]
            })
        }),
        this._formBuilder.group({
            whatever07: ['',Validators.compose([...])],
        })
    ])
    ...
});

从 root myForm 项到获取 formArray 一切都很顺利，但随之而来的麻烦......

所以，我只是无法访问“whatever05”(和 06，但 05 不起作用...所以...) formControl 将其绑定(bind)到模板!这是模板的实际样子(故意跳过数组之前的部分)，有趣的部分是 [????]="????"，这实际上是问题所在。

<form [formGroup]="myForm" ...>
    <!-- ...skipped... -->
    <div formArrayName="whateverArray01" *ngFor="let item of myForm.controls.whateverGroup01.controls.whateverArray01.controls;let idx = index;" [formGroupName]="idx">
        <div [????]="????">
            <input formControlName="whatever05" ... />
            <div [????]="????">
                <input formControlName="whatever06" ... />
            </div>
        </div>    
    </div>
</form>

位于formArray中的formGroups都具有相同的结构。

基本上，问题是我无法访问 formGroups 中的 formControls...

我尝试了几种解决方案，我使用了 [formGroupName] 、 formGroupName (不带括号)、 [formGroup]、 formControlName 等，但无法弄清楚我必须使用什么才能将相应的 formGroup/formControl 与数据 !

我现在遇到了这种错误:

formGroup expects a FormGroup instance. Please pass one in. 
// This when using [formGroup]="item.whateverGroup02"

Cannot find control with name: 'whatever05'
// When using [formGroup]="item.controls.whateverGroup02"

Cannot find control with path: 'whateverArray01 -> 0 ->'
// This when using [formGroupName]="whateverGroup02"

感谢您的阅读/帮助

这是一个带有一些代码的插件:

http://plnkr.co/edit/wf7fcHMkhIwzmLWLnCF8?p=preview

Answer 1

您的表单构建对我来说似乎是正确的。您的模板存在一些问题，您的 FormArray 的迭代不正确，您的 FormArray 不在 FormGroup WhateverGroup01，所以迭代应该如下所示:

*ngFor="let ctrl of myForm.controls.whateverArray01.controls;

至于 FormArray 的模板部分，它应该如下所示:

<div *ngFor="let ctrl of myForm.controls.whateverArray01.controls; let i = index" [formGroupName]="i">
   <input formControlName="whatever05" />
   <div formGroupName="whateverGroup03">
      <input formControlName="whatever06" />
   </div>
</div>

这应该可以解决问题:)

这是一个

Demo