如何以angular2反应形式迭代形式array(array in array in array in array)? [英] How to iterate form array(array in array in array) in angular2 reactive forms?
问题描述
我尝试过多次遍历formArray,
I tried to Iterate formArray several times,
在这种情况下,这是链接器 https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=preview
This is plunker link for this case https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=preview
我想放出像此朋克 https://plnkr.co/edit/zg6nbFULl0WlTZ1sVn5h?p=预览
这是我的情况
[
{
"id": 1,
"legend": "businessModule",
"group": [
{
"id": 1,
"permission": {
"controleType": "ff",
"id": 2,
"key": "create Business"
},
"roles": [
{
"id": 1,
"name": "self"
},
{
"id": 2,
"name": "other"
}
]
},
{
"id": 1,
"permission": {
"controleType": "ff",
"id": 2,
"key": "edit business"
},
"roles": [
{
"id": 1,
"name": "self"
},
{
"id": 2,
"name": "other"
}
]
}
]
},
{
"id": 2,
"legend": "PanicModule",
"group": [
{
"id": 1,
"permission": {
"controleType": "ff",
"id": 2,
"key": "create panic"
},
"roles": [
{
"id": 1,
"name": "self"
},
{
"id": 2,
"name": "other"
}
]
},
{
"id": 1,
"permission": {
"controleType": "ff",
"id": 2,
"key": "edit panic"
},
"roles": [
{
"id": 1,
"name": "self"
},
{
"id": 2,
"name": "other"
}
]
}
]
}
];
对于上面的数组,我试图构建反应式表单,我需要权限,角色数组的复选框在组下
For above array I tried to build reactive forms , I need checkboxes for permission, roles array under group
所以我试图像这样迭代数组
So I tried to iterate array like this
component.ts
validateForm() {
this.roleForm = this.fb.group({
roleName: ['', Validators.required],
roleDescription: ['', Validators.required],
permissionModules: this.fb.array([])
});
this.initModule()
}
initModule(){
initModule() {
const contractArray = <FormArray>this.roleForm.controls['permissionModules'];
console.log(contractArray, 'contractArray')
this.form_objects.forEach(element => {
this.newElement = element;
console.log(this.newElement, 'this.newElement')
// element.forEach(group => {
contractArray.push(this.fb.group({
id: [''],
legend:this.newElement.legend,
group: this.fb.array([ ])
}));
// }
this.initGroup(element, contractArray)
}
}
initGroup (element, contractArray) {
console.log(element, '@@@@@@@@@@@@@@@@@@@@@@',contractArray)
// const groupArray = <FormArray>contractArray.controls['group'];
this.groupArray = <FormArray>this.roleForm.controls.permissionModules.controls[1];
console.log(this.groupArray, 'groupArray&&&&&&&')
element.group.forEach(group => {
this.newGroup = group;
console.log(this.newGroup, 'this.newGroup')
/* if(typeof (this.groupArray) !== 'undefined') {
this.groupArray.push(this.fb.group({
id: [''],
legend:this.newGroup.legend
}));
}*/
}
}
submit(value) {
this.result = value
}
我的html就像
<form [formGroup]="roleForm" (submit)="submit(roleForm.value)">
<h3>Add trust</h3>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" formControlName="roleName">
</div>
<div class="form-group">
<label>roleDescription</label>
<input type="text" class="form-control" formControlName="roleDescription">
</div>
<div class="form-group">
<label>permission roles</label>
<div formArrayName="permissionModules">
<div *ngFor="let contract of roleForm.controls.permissionModules.controls;
let i=index" class="panel panel-default">
<div [formGroupName]="i">
{{contract.value.legend}}
<!-- <input type = "checkbox" formControlName="legend">
{{contract.value.legend}}-->
</div>
</div>
</div>
</div>
<button type="submit">Submit</button>
</form>
但是在上述情况下,我无法迭代initGroup()下的
的第二级数组函数groupArray,我不知道我的错是什么,我搜索了许多站点,它们都只讲一个级别的迭代,我是angular2的新手,所以请有人帮我
预先感谢
But I am unable to iterate the second level array in above case under initGroup () function groupArray, I didn' t know what is my mistake, I searched many sites all are telling only one level iteration, I am new to angular2 ,So Please any one help me Thanks in advance
推荐答案
我解决了问题
使用< FormArray> this .roleForm.controls ['permissionModules'])。at(k).get('group')as FormArray
synatax我可以迭代嵌套数组,
synatax I am able iterate nested arrays,
这是一个笨拙的链接,您可以在其中看到我的方法
http://plnkr.co/edit/AVqWKkUCNc1HjosOpUWf?p=preview
This is plunk link where you can see my approach http://plnkr.co/edit/AVqWKkUCNc1HjosOpUWf?p=preview
这篇关于如何以angular2反应形式迭代形式array(array in array in array in array)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!