How to iterate form array(array in array in array) in angular2 reactive forms?

Question

I tried to Iterate formArray several times,

This is plunker link for this case https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=preview

i want out put like this plunk https://plnkr.co/edit/zg6nbFULl0WlTZ1sVn5h?p=preview

This is my scenario

[

{
  "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() {

  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
}

My html is like

 <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>

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

Compte

This is unclear, do you want the roles or do you want checkboxes for the content of permissionModules1, where I see you have tried to use.... – Walliw

I want checkboes for roles, and permissions like 2 nd plunk link I mentioned above, first plunk link is the way of I tried to solve , thats it – Compte

@SoumyaGangamwar Could you please clarify what this.newGroup is? I also looked in the plunker and it is not defined anywhere that I can see :S – Scalf

@SoumyaGangamwar can you please provide stackblitz, plunk is not working at my side – Mitzvah

Answer 1

I solved my problem

using <FormArray>this.roleForm.controls['permissionModules']).at(k).get('group') as FormArray

synatax I am able iterate nested arrays,

This is plunk link where you can see my approach http://plnkr.co/edit/AVqWKkUCNc1HjosOpUWf?p=preview

Compte

Thank you , This is very helpful to me – Vaudevillian

Thanks for posting! The examples of reactive forms that I saw are mostly pretty simple and don't really point you how to implement more complex nested scenario's – Dysthymia

Been looking for this exact thing for a while. Very helpful – Compelling