ngFor для Dynami c FormGroup не обновляется

Question

Я пробовал несколько разных вариантов, и, похоже, ничего не получается. У меня есть ряд вложенных элементов управления Reactive Forms, которые создаются динамически, и я пытаюсь визуализировать элементы пользовательского интерфейса в ответ на изменения в создаваемой Reactive Form.

К сожалению, когда я делаю изменения в Reactive Формы, элементы пользовательского интерфейса не обновляются должным образом. Похоже, что использование *ngFor в свойстве controls FormGroup не обновляется должным образом при вызове addControl.

Я создал образец StackBlitz, чтобы продемонстрировать поведение, которое я вижу .

https://stackblitz.com/edit/angular-rkoxfw

Спасибо!

Answer 1

это НЕ | key - это | keyvalue, и используйте <input [formControl]="item.value"> для ввода,

<div [formGroup]="form" *ngIf="form">
  <ng-container *ngFor="let item of form.controls | keyvalue">
    <div>
      {{ item.key }}<input [formControl]="item.value">
    </div>
  </ng-container>
</div>

смотрите ваш разветвленный стек

Answer 2

Как насчет определения геттера?

Шаблон:

div [formGroup]="form" *ngIf="!!form">
  <ng-container *ngFor="let key of controlKeys">
    <div>
      {{ key }}: {{ form.value[key] }}
    </div>
  </ng-container>
  <div>
    <button type="button" (click)="add()">Click Me!</button>
  </div>
</div>

Компонент:

get controlKeys() {
  return Object.keys(this.form.controls);
}