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

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.... — AVJT82
– AVJT82, Commented Apr 8, 2017 at 18:18
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 — Soumya Gangamwar
– Soumya Gangamwar, Commented Apr 10, 2017 at 4:23
@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 — Thodoris
– Thodoris, Commented Oct 25, 2017 at 11:10
@SoumyaGangamwar can you please provide stackblitz, plunk is not working at my side — userx
– userx, Commented May 17, 2018 at 19:17

Soumya Gangamwar · Accepted Answer · 2017-04-10 11:35:20Z

6

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

answered Apr 10, 2017 at 11:35

Soumya Gangamwar

1,0324 gold badges20 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marc Ziss Over a year ago

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

Rene Trujillo Over a year ago

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

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related