[英]Reactive Form nested FormArray with dynamic Field
I will be getting list of items and their hobbylist from backend, User should able to edit/add.我将从后端获取项目列表及其爱好列表,用户应该能够编辑/添加。
let item of ['item1', 'item2', 'item3']
(ngSubmit) value; (ngSubmit) 值;
I want to following output:我想关注output:
item1: {
hobbyList: Array[0]
name: null
},
item2: {
hobbyList: Array[0]
name: null
},
item3: {
hobbyList: Array[0]
name: null
}
I have tried doing this but getting below error我试过这样做但得到以下错误
ERROR
Error: Cannot find control with name: 'item1.hobbyList'
Unable to display error. Open your browser's console to view.
Is there any other way to achieve this.有没有其他方法可以实现这一点。
Link: What i have tried so far Stackblitz: https://stackblitz.com/edit/angular-qsq3yb?file=src%2Fapp%2Fapp.component.ts链接:到目前为止我已经尝试过 Stackblitz: https://stackblitz.com/edit/angular-qsq3yb?file=src%2Fapp%2Fapp.component.ts
if you want to create the following array:如果要创建以下数组:
item1: {
hobbyList: Array[0]
name: null
},
item2: {
hobbyList: Array[0]
name: null
},
item3: {
hobbyList: Array[0]
name: null
}
then you need just to use map
function:那么你只需要使用
map
function:
let fooArray = ['item1', 'item2', 'item3'];
let desiredArray = fooArray.map(a => {
let obj = {};
obj[a] = {
hobbyList:[],
name : ''
};
return obj;
});
console.log(desiredArray);
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 .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>
But let me explain a bit the code.但是让我解释一下代码。 You has a FormGroup with three FormGroup, each of them has a FormControl and a FormArray.
您有一个带有三个 FormGroup 的 FormGroup,每个 FormGroup 都有一个 FormControl 和一个 FormArray。 I like iterate always over the form of over elements of the form, it's the reason to iterate over some "bizarro" like
let group of myForm.controls |keyvalue
under this div, group.value will be each FormGroup, and group.key will be the name of the propertie.我喜欢总是遍历表单元素的表单,这就是迭代一些“奇怪”的原因,比如
let group of myForm.controls |keyvalue
在这个 div 下,group.value 将是每个 FormGroup,而 group.key 将是属性的名称。
As is a FormGroup, we create a div with this [formGroup]作为一个 FormGroup,我们用这个 [formGroup] 创建一个 div
<div style="margin:20px;" [formGroup]="group.value">
...
</div>
Under this div, we ask about the formControl "name" using在这个 div 下,我们使用
<input type="text" formControlName="name">
And about the formArray like而关于 formArray 之类的
<div formArrayName="hobbyList">
We has a function to get the formArray, hobbiesArray(group.value)
that pass the FormGroup, identically in onAddHobby we pass the FormGrorup我们有一个 function 来获取传递 FormGroup 的 formArray,
hobbiesArray(group.value)
,同样在 onAddHobby 我们传递 FormGrorup
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.