首页 文章

Angular2嵌套formGroups - formArrays和模板绑定

提问于
浏览 次
2

这是问题所在：

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

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

角度方面，它应该看起来像这样（不正确/完整，但只是给出一个想法）：

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将它绑定到模板！这是模板实际看起来的样子（在数组之前有意地跳过了部分），有趣的部分是[????] =“????”，这实际上就是问题 .

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

感谢您的阅读/帮助

这是一个带有一些代码的plunker：

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

javascript html angular typescript angular2-forms

2 回答

  • 2

    你的表单构建似乎对我来说是正确的 . 您的模板有问题， 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>

    那应该解决问题:)

    这是一个

    演示

    回复于
  • 2

    首先，您的视图绑定错误：

    [formGroupName]="whateverGroup02"

    组件中没有 whateverGroup02 属性 . 我们应该传递字符串如下：

    formGroupName="whateverGroup02"

    然后，如果你 Build 组像：

    this.fb.group({
  x: 1,
  y: {
    z: 2
  }
})

    你会得到

    FormGroup
  -> FormControl with name `x` and value `1`   
  -> FormControl with name `y` and value `{ z: 2 }`

    这意味着如果你想操纵嵌套的formGroups，你必须创建它们 . 即

    let fGroups = data.map(rs => this.buildFormGroup(rs));
...
buildFormGroup(obj) {
  let formGroup: { [id: string]: AbstractControl; } = {};
  Object.keys(obj).forEach(key => {
    formGroup[key] = typeof obj[key] === 'object' ?
      this.buildFormGroup(obj[key]) : 
      new FormControl(obj[key]);
  });
  return this._formBuilder.group(formGroup);
}

    Plunker Example

    回复于

相关问题