Angular - nested formArray

[Daywa1k3r]

Hi ich habe den use case in einem formArray, neben einfachen formcontrols, noch ein weiteres Formarray zu haben.
Ich bekomme leider in meinem templatescript kein zugriff auf das nested formArray.


https://stackoverflow.com/questions/...ther-formarray
Sah vielversprechend aus, hat aber leider nicht geholfen bei mir.

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

Hier bekomme ich meine eigene Form initialisiert und mittels {{ existingFlavForm.value | json }} bekomme ich auch alle werte im templatescript angezeigt.

Nun das templatescript:



<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 *ngFor="let ing of existingFlavForms.controls[i].ingrs.controls; let j = index" [formGroupName] = "j"> // zeile 176
{{ing}}
</div>
</div>
</div>

</mat-expansion-panel>
</div>
</div>
</form>

So ist meine Form strukturiert:
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([
this.fb.group({
ingr: [this.cocktails[i].ingr]
})
])
}));
}

die einzige Fehlermeldung aus dem browser:
https://www.imagebanana.com/s/1343/h1szBhPj.html