使用 ng-container 和 ng-template 時動態表單不起作用

Question

我正在創建一個動態表單，我在其中獲取表單字段表單 api。 我正在使用ng-container & ng-template多次重用表單組，但它沒有按預期工作。 當我使用通常的 div 時，它按預期工作。

https://stackblitz.com/edit/angular-ivy-hqc49t

Answer 1

您可以使用 FormGroup 實例而不是 formGroupName，因為模板會丟失 formGroup 的上下文： Stackblitz

<ng-container
    *ngTemplateOutlet="
      fieldsTemplate;
      context: {
        formGroup: formGroundUse.get('groundUses')
      }
    "
  >
  </ng-container>
<div formArrayName="groundUsesArray">
groundUsesArray
<ng-container *ngFor="let data of groudUse.controls">
  <ng-container
    *ngTemplateOutlet="
      fieldsTemplate;
      context: {
        formGroup: data
      }
    "
  >
  </ng-container>
</ng-container>

<ng-template #fieldsTemplate let-formGroup="formGroup">
  <div [formGroup]="formGroup">
    <tr>
      <td class="input-container">
        <label for="">title</label>
        <input type="text" class="form-input" formControlName="title" />
      </td>
      <td class="input-container">
        <label for="">value</label>
        <input type="text" class="form-input" formControlName="value" />
      </td>
      <td class="input-container">
        <label for="">percentage</label>
        <input type="number" class="form-input" formControlName="percentage" />
      </td>
    </tr></div
></ng-template>