title: Formarray inside formArray in angular 4
body: <p>I am trying to implement formarray inside formarray but its not working, tried below too but doesn't work.</p>
  <p><a href="https://stackoverflow.com/questions/44428634/how-to-get-formarrayname-when-the-formarray-is-nested-in-another-formarray">How to get FormArrayName when the FormArray is nested in another FormArray?</a></p>
  <p>could someone please help me where am i doing wrong in below code</p>
  <p><strong>HTML</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div [formGroup]=&quot;MainFormGroup&quot; class=&quot;custom-auto-complete&quot;&gt;
    &lt;mat-radio-group matInput formControlName=&quot;Applies&quot;&gt;
      &lt;mat-radio-button *ngFor=&quot;let applie of applies&quot; [value]=&quot;applie.id&quot;&gt;{{applie.value}}&lt;/mat-radio-button&gt;
    &lt;/mat-radio-group&gt;           
    &lt;div formArrayName=&quot;FormArrayOne&quot;&gt;
      &lt;div *ngFor=&quot;let mains of MainFormGroup.get('FormArrayOne')['controls']; let i=index&quot;&gt;
        &lt;div [formGroupName]=&quot;i&quot;&gt;
          &lt;mat-icon *ngIf=&quot;MainFormGroup.get('FormArrayOne').length &gt; 1&quot; (click)=&quot;removeMarket(i)&quot;&gt;remove_circle&lt;/mat-icon&gt;
          &lt;mat-icon (click)=&quot;addOne()&quot;&gt; add_circle&lt;/mat-icon&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput formControlName=&quot;OneField&quot; value=&quot;&quot;&gt;
          &lt;/mat-form-field&gt;
          &lt;div formArrayName=&quot;FormArrayTwo&quot;&gt;
            &lt;div *ngFor=&quot;let Market of MainFormGroup.get('FormArrayTwo')['controls']; let j=index&quot; &gt;
              &lt;div [formGroupName]=&quot;j&quot;&gt;            
                &lt;mat-form-field class=&quot;formfieldsControl&quot;&gt;
                  &lt;input matInput formControlName=&quot;Destination&quot;&gt;
                &lt;/mat-form-field&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;         
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  <p><strong>TS</strong></p>
  <pre class="lang-js prettyprint-override"><code>public ngOnInit() {
    this.MaintFormGroup = this._fb.group({
      Applies : '',
      FormArrayOne: this._fb.array([
        this.initArrayOne(),
      ])
    });
  }
  public initArrayOne() {
    return this._fb.group({
      OneField: '',
      FormArrayTwo : this._fb.array([
        this.initFormArrayTwo()
      ])
    });
  }
  public addMarket() {
    const control = &lt;FormArray&gt; this.MaintFormGroup.get('FormArrayOne');
    control.push(this.initArrayOne());
  }
  public removeMarket(i: number) {
    const control = &lt;FormArray&gt; this.MaintFormGroup.get('FormArrayOne');
    control.removeAt(i);
  }
  public initFormArrayTwo() {
    return this._fb.group({
      Destination : ''
    });
  }
  public addFormArrayTwo() {
    const Control = &lt;FormArray&gt; this.MaintFormGroup.get('FormArrayTwo');
    Control.push(this.initFormArrayTwo());
  }
  public removeFormArrayTwo(j: number) {
    const Control = &lt;FormArray&gt; this.MaintFormGroup.get('FormArrayTwo');
    Control.removeAt(j);
  }
  </code></pre>