如何以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屋！