Angular2嵌套formGroups-formArrays和模板绑定 [英] Angular2 Nested formGroups - formArrays and template Binding
问题描述
问题出在这里
我有一个带有嵌套表单组的复杂表单,这是它的样子的简化"结构:
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([...])],
})
])
...
});
从根myForm项到获取formArray一切都还不错,但是麻烦了....
Things go pretty fine from root myForm item to fetching the formArray, but then come the troubles....
所以,我只是无法访问"whatever05"(而06但05不能工作...所以...)formControl将其绑定到模板!这是模板的实际外观(故意跳过数组之前的部分),有趣的部分是[????] ="????",这实际上就是问题所在.
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>
位于formArray中的formGroup具有相同的结构.
The formGroups located in the formArray have all the same structure.
基本上,问题是我无法访问formGroups内的formControls
Basically, the problem is that I canNOT access the formControls within the formGroups...
我尝试了几种解决方案,我使用了[formGroupName],formGroupName(不带括号),[formGroup],formControlName等...,但无法弄清楚我必须使用什么方法才能将相应的formGroup/formControl与数据 !
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 !
我现在遇到这种错误:
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
推荐答案
首先,您的视图具有错误的绑定:
First of all your view has wrong binding:
[formGroupName]="whateverGroup02"
您的组件中没有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
}
})
你会得到
FormGroup
-> FormControl with name `x` and value `1`
-> FormControl with name `y` and value `{ z: 2 }`
这意味着如果要操作嵌套的formGroup,则必须创建它们. 即
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嵌套formGroups-formArrays和模板绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!