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

it worked like a charm for me same as nested form groups .. you need to:

1. use [formGroupName]="i"
2. formControlName cannot be dynamic .. instead it should have the name that you when you initialized the from group and there are countless example for that.
3. you need to iterate over the form array controls in the same div that you used formArrayName attribute in.

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