Angular 6 - доступ к вложенной форме Array

Question

Добрый вечер,

Я построил конструкцию с реактивными формами.Существует набор коктейлей, который включает в себя набор ингредиентов.Это должно быть спроецировано в моей реактивной форме под названием existingFlavForms.Проблема в том, что я не могу получить доступ к вложенному компоненту 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]}
          ]
        )
      }));
    }

Это шаблонный скрипт, где я пытаюсь получить доступ ко всему.

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

Я искал впохожие вопросы, но не могу найти правильного решения.Данные там и полностью инициализированы.

Это говорит о консоли браузера .. "TypeError: undefined is not an object (evaluating '_v.context.$implicit[_v.context.index].controls')"

С наилучшими пожеланиями!

Я добавил базовый стек, который показываетструктура данных в целом с фиктивными данными.https://stackblitz.com/edit/angular-l3ghac

Answer 1

Я нашел решение:

Проблема заключалась в инициализации вложенного массива FormArray.

с помощью этого фрагмента может работать для меня:

 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],
    }));
  }
}

}

Доступ в html работает как обычно с внешним * ngFor:

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

Answer 2

Ваш элемент flav, поэтому вызов flav[i] в вашей итерации является излишним.В своем внутреннем цикле for замените flav[i].controls.ingrs.controls на flav.controls.ingrs.controls.

, т.е.

<p *ngFor="let ingr of flav.controls.ingrs.controls;">
    {{ingr.i_name}}
</p>