Angular 6 - Access to nested formArray

Question

Good evening,

I have built a construct with reactive forms. There is a cocktail array which includes an ingredient array. This should be projected in my reactive form called existingFlavForms. The issue is, I can't get access to the nested ingredient formArray.

this.existingFlavForm = this.fb.group({
          flavs: this.fb.array([])
        });


for (let i = 0; i < this.cocktails.length; i++) {
      this.existingFlavForms.push(this.fb.group({
        id: [this.cocktails[i].id],
        c_name: [this.cocktails[i].c_name],
        mark: [this.cocktails[i].mark],
        imgUrl: [this.cocktails[i].imgUrl],
        ingrs: this.fb.array([
            {ingr: [this.cocktails[i].ingr]}
          ]
        )
      }));
    }

This is the template script, where I try to access everything.

<form [formGroup]="existingFlavForm">
  <div formArrayName="flavs">
    <div *ngFor="let flav of existingFlavForms.controls; let i=index">
      <mat-expansion-panel class="myPanel">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <h3 class="text-info"> {{flav.value.c_name}} </h3>
          </mat-panel-title>
          <mat-icon class="mr-lg-3 mt-lg-2">settings</mat-icon>
          <mat-icon class="mr-lg-3 mt-lg-2" (click)="deleteCocktail()">delete</mat-icon>
        </mat-expansion-panel-header>
        <div class="row">
          <div [formGroupName]="i">
            <div formArrayName="ingrs">
              <p *ngFor="let ingr of flav[i].controls.ingrs.controls;">
                {{ingr.i_name}}
              </p>
            </div>
          </div>
        </div>
      </mat-expansion-panel>
    </div>
  </div>
</form>

I searched in similar questions, but can't find a proper solution. The data is there and fully initialised.

This says the browser console.. "TypeError: undefined is not an object (evaluating '_v.context.$implicit[_v.context.index].controls')"

Best regards!

I have now added a basic stackblitz, which shows the data structure in general with dummy data. https://stackblitz.com/edit/angular-l3ghac

Answer 1

I found the solution:

Problem was the initializing of the nested FormArray.

with this could snippet work it for me:

 initExistingFlavForm() {
this.clearArray();
for (let i = 0; i < this.cocktails.length; i++) {
  this.existingFlavForms.push(this.fb.group({
    id: [this.cocktails[i].id],
    c_name: [this.cocktails[i].c_name],
    mark: [this.cocktails[i].mark],
    imgUrl: [this.cocktails[i].imgUrl],
    liqs: this.fb.array([])
  }));
}
this.fillNestedIngredient();

}

fillNestedIngredient() {
for (let i = 0; i < this.cocktails.length; i++) {
  const ingrFormArray = this.existingFlavForm.get('flavs')['controls'][i].get('liqs') as FormArray;
  for (let c = 0; c < this.cocktails[i].ingr.length; c++) {
    ingrFormArray.push(this.fb.group({
      id: [this.cocktails[i].ingr[c].id],
      i_name: [this.cocktails[i].ingr[c].i_name],
      ml_bottle: [this.cocktails[i].ingr[c].ml_bottle],
    }));
  }
}

}

Accessing in html works as usual with an outer *ngFor:

<div formArrayName="liqs">
            <div *ngFor="let ingr of getIngredients(flav); let j = index" [formGroupName]="j">
            </div>
          </div>