title: How to iterate form array(array in array in array) in angular2 reactive forms?
body: <p>I tried to Iterate formArray several times, </p>
  
  <p>This is plunker link for this case <a href="https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=preview</a></p>
  
  <p>i want out put like this plunk <a href="https://plnkr.co/edit/zg6nbFULl0WlTZ1sVn5h?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/zg6nbFULl0WlTZ1sVn5h?p=preview</a></p>
  
  <p>This is my scenario </p>
  
  <pre><code>[
  
  {
    "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"
          }
        ]
      }
  
    ]
  }
  
  ];
  </code></pre>
  
  <p>For above array I tried to build reactive forms , I need checkboxes for <strong>permission, roles array</strong> under <strong>group</strong></p>
  
  <p>So I tried to iterate array like this</p>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>validateForm() {
    this.roleForm = this.fb.group({
    roleName: ['', Validators.required],
    roleDescription: ['', Validators.required],
    permissionModules: this.fb.array([])
    });
     this.initModule()
   }
  </code></pre>
  
  <p>initModule() {</p>
  
  <pre><code>  const contractArray = &lt;FormArray&gt;this.roleForm.controls['permissionModules'];
    console.log(contractArray, 'contractArray')
     this.form_objects.forEach(element =&gt; {
         this.newElement = element;
         console.log(this.newElement, 'this.newElement')
      // element.forEach(group =&gt; {
  
            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 = &lt;FormArray&gt;contractArray.controls['group'];
      this.groupArray = &lt;FormArray&gt;this.roleForm.controls.permissionModules.controls[1];
  
      console.log(this.groupArray, 'groupArray&amp;&amp;&amp;&amp;&amp;&amp;&amp;')
        element.group.forEach(group =&gt; {
         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
  }
  </code></pre>
  
  <p>My html is like </p>
  
  <pre><code> &lt;form [formGroup]="roleForm"  (submit)="submit(roleForm.value)"&gt;
      &lt;h3&gt;Add trust&lt;/h3&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label&gt;Name&lt;/label&gt;
          &lt;input type="text" class="form-control" formControlName="roleName"&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label&gt;roleDescription&lt;/label&gt;
          &lt;input type="text" class="form-control" formControlName="roleDescription"&gt;
      &lt;/div&gt;
       &lt;div class="form-group"&gt;
          &lt;label&gt;permission roles&lt;/label&gt;
          &lt;div formArrayName="permissionModules"&gt;
            &lt;div *ngFor="let contract of roleForm.controls.permissionModules.controls;
            let i=index" class="panel panel-default"&gt;
             &lt;div  [formGroupName]="i"&gt;
                 {{contract.value.legend}}
               &lt;!-- &lt;input type = "checkbox" formControlName="legend"&gt;
                {{contract.value.legend}}--&gt;
  
  
  
             &lt;/div&gt;
  
  
            &lt;/div&gt;
          &lt;/div&gt;
  
       &lt;/div&gt;
     &lt;button type="submit"&gt;Submit&lt;/button&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>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</p>