Angular Реактивная форма не привязывает данные к внутренним дочерним элементам при применении в рекурсивном ng-шаблоне - PullRequest
Новая
       22

Angular Реактивная форма не привязывает данные к внутренним дочерним элементам при применении в рекурсивном ng-шаблоне

0 голосов
/ 23 марта 2020

Моя цель - создать пользовательский интерфейс, в котором пользователь мог бы легко создавать категории и подкатегории для своего интернет-магазина. Чтобы позволить пользователю создавать неопределенные подкатегории, я использовал рекурсивный ng-шаблон. 

<form [formGroup]="testForm">

<mat-form-field>
  <mat-label class="fontSub">Title</mat-label>
  <input type="text" formControlName="label" matInput>
</mat-form-field>
<mat-form-field>
  <mat-label class="fontSub">Description</mat-label>
  <input type="text" formControlName="desc" matInput>
</mat-form-field>

<div formArrayName="subCategories">

  <ng-template #recursiveList let-subCategories>

    <div style="margin-right: 20px; border-right: 1px solid orange;" *ngFor="let item of subCategories;let i=index;">
      <div [formGroupName]="i">

        <mat-form-field>
          <mat-label class="fontSub">Title</mat-label>
          <input type="text" formControlName="label" matInput>
        </mat-form-field>

        <mat-form-field>
          <mat-label class="fontSub">Description</mat-label>
          <input type="text" formControlName="desc" matInput>
        </mat-form-field>
      </div>
      <!-- {{item.get('element')?.controls?.length}} -->
      <div *ngIf="item.get('subCategories')?.controls?.length > 0">
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.get('subCategories').controls }">
        </ng-container>
      </div>
    </div>
  </ng-template>

  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: testForm.get('subCategories').controls }">
  </ng-container>

</div>

и в ngOnInit () я инициализирую testForm следующим образом: 

this.testForm = this.fb.group({
  label:[''],
  desc:[''],
  subCategories: this.fb.array([
    this.fb.group({
      label:[''],
      desc:[''],
      subCategories: this.fb.array([
        this.fb.group({
          label:[''],
          desc:[''],
          subCategories: this.fb.array([
          ])
        })
      ])
    })
  ])
})

Хотя шаблон отображается правильно и показывает все подкатегории, когда я пытаюсь отредактировать самый внутренний элемент управления, он не обновляется, и вместо этого текст, который я набираю, обновляет элемент управления второго уровня. Например, когда я набираю что-то в поле для des c для самого внутреннего объекта, элемент управления des c для первого потомка моей testForm обновляется.

Я был бы рад, если бы кто-нибудь мог помочь мне с этим рекурсивным подходом.

...