具有动态字段的反应式表单嵌套FormArray
具有动态字段的反应式表单嵌套FormArray
提问于 2019-10-14 21:04:02
我将从后端获得项目列表和他们的爱好列表，用户应该能够编辑/添加。
let item of ['item1', 'item2', 'item3'](ngSubmit)值；
我想要以下输出：
item1: {
hobbyList: Array[0]
name: null
},
item2: {
hobbyList: Array[0]
name: null
},
item3: {
hobbyList: Array[0]
name: null
}我尝试过这样做，但得到以下错误
ERROR
Error: Cannot find control with name: 'item1.hobbyList'
Unable to display error. Open your browser's console to view.有没有其他方法可以做到这一点。
Link :到目前为止我尝试过的Stackblitz：https://stackblitz.com/edit/angular-qsq3yb?file=src%2Fapp%2Fapp.component.ts
回答 2
Stack Overflow用户
发布于 2019-10-14 21:10:56
如果您想要创建以下数组：
item1: {
hobbyList: Array[0]
name: null
},
item2: {
hobbyList: Array[0]
name: null
},
item3: {
hobbyList: Array[0]
name: null
}然后你只需要使用map函数：
let fooArray = ['item1', 'item2', 'item3'];
let desiredArray = fooArray.map(a => {
let obj = {};
obj[a] = {
hobbyList:[],
name : ''
};
return obj;
});
console.log(desiredArray);Stack Overflow用户
发布于 2019-10-14 21:41:25
public myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({});
for(let item of ['item1', 'item2', 'item3']) {
this.myForm.addControl(item,
new FormGroup({
name: new FormControl(),
hobbyList: new FormArray([])
})
)
}
}
onAddHobby(group:FormGroup) {
(group.get('hobbyList') as FormArray).push(new FormControl())
}
hobbiesArray(group:FormGroup):FormArray
{
return group.get('hobbyList') as FormArray
}The .html
<form [formGroup]="myForm">
<ng-container *ngFor="let group of myForm.controls |keyvalue">
<div style="margin:20px;" [formGroup]="group.value">
<label for="">{{group.key}}</label>
<input type="text" formControlName="name">
<button type="button" (click)="onAddHobby(group.value)">Add Hobbies</button>
<div formArrayName="hobbyList">
<div *ngFor="let item of hobbiesArray(group.value).controls; let i = index">
<label for="">Hobbies</label>
<input [formControlName]="i">
</div>
</div>
</div>
</ng-container>
</form>
<pre>
{{myForm?.value|json}}
</pre>但让我来解释一下代码。您有一个带有三个FormGroup的FormGroup，每个FormGroup都有一个FormControl和一个FormArray。我喜欢迭代总是遍历表单元素的表单，这就是为什么要遍历一些“奇怪的东西”，比如这个div下的let group of myForm.controls |keyvalue，group.value将是每个FormGroup，而group.key将是属性的名称。
和一个div一样，我们用这个FormGroup创建一个formGroup
<div style="margin:20px;" [formGroup]="group.value">
...
</div>在这个div下，我们使用以下命令查询formControl "name“
<input type="text" formControlName="name">关于formArray，比如
<div formArrayName="hobbyList">我们有一个函数来获取formArray，hobbiesArray(group.value)传递FormGroup，同样在onAddHobby中我们传递FormGrorup
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58377484
复制相关文章
相似问题
腾讯云开发者
