这是问题:
我有一个带有嵌套式组的复杂形式,这是其外观的"简化"结构:
-> 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,但随后会出现麻烦。...
所以,我只是无法访问" whywhing05"(和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中的FormGroup具有所有相同的结构。
基本上,问题是我无法访问formgroup中的formcontrols ...
我尝试了几种解决方案,我使用了[FormGroupName],FormGroupName(无括号(,[FormGroup],FormControlname,...但是无法弄清楚我必须用来将相应的FormGroup/FormGroup/formgroup/form concontrol与数据 !
我现在遇到了这种错误:
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=peview
您的表格的构建对我来说似乎是正确的。您在模板中遇到了一些麻烦,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
首先您的视图具有错误的绑定:
[formGroupName]="whateverGroup02"
组件中没有whateverGroup02
属性。我们应该通过以下字符串:
formGroupName="whateverGroup02"
然后,如果您建立了类似:
的组this.fb.group({
x: 1,
y: {
z: 2
}
})
您会得到
FormGroup
-> FormControl with name `x` and value `1`
-> FormControl with name `y` and value `{ z: 2 }`
这意味着,如果您想操纵嵌套的形式组,则必须创建它们。即。
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示例