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 :

HTML:

<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>

TS :

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 :

TS :

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.

HTML:

<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 struggling same problem. And finaly solved it. Firstly we looking to main form array 'cities' structure.

Which is the yellow highlited controls at image is first array control path. => cities And green highlited control is 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

Answer 2

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.