动态表单在使用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>