无法将嵌套表单组绑定到反应式表单中的表单数组？

Question

https://stackblitz.com/edit/angular-reactive-forms-eg-s1v5zs?file=src/app/app.component.html

无法将 {表单控件} 绑定到数据 [ { "组 1"： "， "组 2"：{ "数据"： " } } ]

需要使用表单控件名称进行绑定

<form [formGroup]="formGroup">
<div formArrayName="features">
<div class="row no-gutters form-group" *ngFor="let feature of features.controls; let i = index; let last = last"
[formGroupName]="i">
Grp:1 <input
type="text"
class="form-control px-2 col"
formControlName="group1"
title="feature"
>
<!-- //How to bind  value of data in html??? -->
<div [formGroup]="group2">
<input type="text"
class="form-control px-2 col"
formControlName="group2"
title="feature"
>
</div>
<button class="col btn btn-success" (click)="addFeature()">
+
</button>
</div>
</div>
<pre>
{{ features.value|json}}
</pre>
</form>
typeScript
constructor(private fb: FormBuilder) {
this.addFeature();
}
formGroup = this.fb.group({
features: this.fb.array([])
});
get features(): FormArray {
return this.formGroup.get("features") as FormArray;
}
addFeature(): void {
let data = this.fb.group({
group1: new FormControl("grp_1"),
group2: this.fb.group({
data: new FormControl("grp_2")
})
});
this.features.push(data);
}`enter code here`

Answer 1

你的文本<input>formControlName="group2"。相反，您应该将group2窗体组的data控件绑定到输入：formControlName="data"。

Answer 2

如果你想用对象数组创建嵌套表单，那么你应该使用FormGrop。

试试这个：

addFeature(): void {
let data = this.fb.group({
group1: new FormControl("grp_1"),
group2: this.fb.group({
data: new FormControl("grp_2")
}),
group3: this.fb.array([
this.fb.group({
data: new FormControl("grp_3")
})
])
});
this.features.push(data);
}

分叉示例