Angular2 Nested formGroups - formArrays 和模板绑定 [英] Angular2 Nested formGroups - formArrays and template Binding

问题描述

问题来了:

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

->我的表单(表单组)->无论01(formControl - 输入)->What02 (formControl - 输入)->任何组01(formGroup)->What03 (formControl - 输入)->无论04(formControl - 输入)->无论Array01(formArray)->WhatGroup02(formGroup)->无论05(formControl - 输入)->任何组03(formGroup)->无论06(formControl - 输入)->任何组04(formGroup)->无论07(formControl - 输入)->...

有角度的一面，它应该看起来像这样(不正确/不完整，只是为了提供一个想法):

this.myForm = this.fb.group({what01: ['',Validators.compose([...])],what02: ['',Validators.compose([...])],whatGroup01: this._formBuilder.group({what03: ['',Validators.compose([...])],what04: ['',Validators.compose([...])]}),whatArray01: this._formBuilder.array([this._formBuilder.group({what05: ['',Validators.compose([...])],whatGroup03: this._formBuilder.group({what06: ['',Validators.compose([...])]})}),this._formBuilder.group({what07: ['',Validators.compose([...])],})])...});

从根 myForm 项目到获取 formArray 一切都很好，但是麻烦来了....

所以，我无法访问whatever05"(并且 06 但 05 不起作用......所以......)formControl 将其绑定到模板！这是模板的实际外观(故意跳过数组之前的部分)，有趣的部分是 [????]="????"，这实际上是问题所在.

<!-- ...跳过...--><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" .../>

</表单>

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

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

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

我现在遇到了这种错误:

formGroup 需要一个 FormGroup 实例.请传入一份.//当使用 [formGroup]="item.whateverGroup02" 时找不到名称为whatever05"的控件//当使用 [formGroup]="item.controls.whateverGroup02"无法通过路径找到控件:'whateverArray01 ->0 ->'//当使用 [formGroupName]="whateverGroup02" 时

感谢阅读/帮助

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

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

解决方案

首先你的视图绑定错误:

[formGroupName]="whateverGroup02"

您的组件中没有 whateverGroup02 属性.我们应该按如下方式传递字符串:

formGroupName="whateverGroup02"

然后，如果您像这样构建组:

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

你会得到

FormGroup->名称为x"且值为1"的 FormControl->名称为y"且值为{ z: 2 }"的 FormControl

这意味着如果你想操作嵌套的表单组，你必须创建它们.即

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

Plunker 示例

Here is the problem:

I have a complex form with nested formgroups, here is a "simplified" structure of what it looks like :

-> 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 side, it should look somehow like this (not correct/complete, but just to give an idea) :

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([...])],
        })
    ])
    ...
});

Things go pretty fine from root myForm item to fetching the formArray, but then come the troubles....

So, I just can't access "whatever05" (and 06 but 05 does NOT work... so...) formControl to bind it to the template ! Here is what the template actually looks like (intentionnaly skipped the part before the array), the interesting part is the [????]="????", this is the problem actually.

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

The formGroups located in the formArray have all the same structure.

Basically, the problem is that I canNOT access the formControls within the formGroups...

I tried several solutions, I used [formGroupName] , formGroupName (without brackets), [formGroup], formControlName, ... But cannot figure out what I have to use to be able to bind the corresponding formGroup/formControl with the data !

I come to this kind of errors by now :

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"

Thanks for reading / help

Here is a plunker with some code :

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

解决方案

First of all your view has wrong binding:

[formGroupName]="whateverGroup02"

There is no whateverGroup02 property in your component. We should pass string as follows:

formGroupName="whateverGroup02"

Then if you build group like:

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

you will get

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

It means if you want to manipulate nested formGroups you have to create their. i.e.

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

这篇关于Angular2 Nested formGroups - formArrays 和模板绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！