我尝试过多次迭代formArray,
这是这种情况下的矮人链接https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=preview
我想把像这样的笨蛋放掉https://plnkr.co/edit/zg6nbFULl0WlTZ1sVn5h?p=preview
这是我的情况
[
{
"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"
}
]
}
]
}
];
对于以上阵列I试图建立反应性形式,我需要复选框许可,角色阵列下组
所以我试图像这样迭代数组
component.ts
validateForm() {
this.roleForm = this.fb.group({
roleName: ['', Validators.required],
roleDescription: ['', Validators.required],
permissionModules: this.fb.array([])
});
this.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的新手,所以请任何人都可以帮助我
我解决了我的问题
使用 <FormArray>this.roleForm.controls['permissionModules']).at(k).get('group') as FormArray
synatax我可以迭代嵌套数组,
这是一个笨拙的链接,您可以在其中看到我的方法http://plnkr.co/edit/AVqWKkUCNc1HjosOpUWf?p=preview
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句