How to get FormArrayName when the FormArray is nested in another FormArray?

Question

Refering to : https://angular.io/docs/ts/latest/api/forms/index/FormArrayName-directive.html, it is easy to get a FormArrayName :

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div formArrayName="cities">
    <div *ngFor="let city of cities.controls; index as i">
       <input [formControlName]="i" placeholder="City">
    </div>
  </div>
  <button>Submit</button>
</form>

form = new FormGroup({
  cities: new FormArray([
    new FormControl('SF'),
    new FormControl('NY')
  ])
});

get cities(): FormArray { return this.form.get('cities') as FormArray; } 
// This does the magic!

The DOM <div formArrayName="cities"> uses the getter get cities(): FormArray { return this.form.get('cities') as FormArray; } and everything is working like a charm

BUT

How to make the getter when the FormArray is nested in another FormArray?

Let's say this example :

form = new FormGroup({
  cities: new FormArray([
    new FormGroup({ 
      name: new FormControl('SF'),
      sisterCities: new FormArray(['Shanghai','Zurich',...])
    }),
    new FormGroup({
      name: new FormControl('NY'),
      sisterCities: new FormArray(['London','Oslo',...])
    }),
  ]),
});

get cities(): FormArray { return this.form.get('cities') as FormArray; } 
// still get the main cities FormArray

// but 
// get sisterCities() won't work because I need to target a city FormGroup (NY or SF) before accessing its sisterCities FormArray.
// and AFAIK, it is not possible to pass parameters to a getter.

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div formArrayName="cities">
    <div *ngFor="let city of cities.controls; index as i" [formGroupName]="i">
       <input [formControlName]="name" placeholder="City">
       <div formArrayName="sisterCities"> <!-- this will never work -->
         <div *ngFor="let sisterCity of sisteCities.controls; index as j">
           ...
         </div>
       </div>
    </div>
  </div>
  <button>Submit</button>
</form>

Please, help me to achieve this. Thank you in advance.

Answer 1

I was struggling with the same problem. And finally solved it. Firstly we looking to main form array 'cities' structure.

Which is the yellow highlighted controls at image is the first array control path. => cities And green highlighted control is the second array control. => sisterCities

    <form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div formArrayName="cities">
    <div *ngFor="let city of cities.controls; index as i" [formGroupName]="i">
       <input [formControlName]="name" placeholder="City">
       <div formArrayName="sisterCities"> <!-- this will never work -->
         <div *ngFor="let sisterCity of cities.controls[i]sisterCities.controls; index as j">
           ...
         </div>
       </div>
    </div>
  </div>
  <button>Submit</button>
</form>

Proper way to access this second nested FormArray is accessing first control array after insert current cities index. And respectively sisterCities,control.

let sisterCity of cities.controls[i].sisterCities.controls