使用ng-container和ng-template时动态形式不起作用

发布于 2025-02-07 13:07:59 字数 305 浏览 2 评论 0原文

我正在创建一个动态表单，其中我正在获取表单字段表单API。我正在使用ng-container＆amp; ng-template要多次重复使用FormGroup，但没有按预期工作。当我使用通常的div时，它会按预期工作。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

若言繁花未落 2025-02-14 13:07:59

您可以使用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>

You can use FormGroup instances instead of formGroupName, because template loses context of 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>

回复收藏 0 原文

~没有更多了~