使用 ng-template 时，组件中未显示表单数据

问题描述

我正在尝试创建一个可以通过使用 ng-template 重复使用的表单。但不知何故，当我保存表单并调用函数 doAddMenuItem(postForm) 时，组件中的数据无法访问。

这是带有 ngTemplateOutlet 的表单：

<form (submit)="doAddMenuItem(postForm)" #postForm="ngForm">
  <ng-template [ngTemplateOutlet]="MsgRef"></ng-template>
  <button class="button medium button__save">Save</button>
</form>

还有 ng 模板：

<ng-template #MsgRef>
  <ul class="list">
    <li>Titel:</li>
    <li><input type="text" name="title" [(ngModel)]="menuItemObj.title"></li>
  </ul>
  <ul class="list">
    <li>Symbol:</li>
    <li><input type="text" name="symbol" [(ngModel)]="menuItemObj.symbol"></li>
  </ul>
  <ul class="list">
    <li>Meer weten link:</li>
    <li><input type="text" name="more_info_link" [(ngModel)]="menuItemObj.more_info_link"></li>
  </ul>
  <ul class="list">
    <li>Bericht:</li>
    <li>
      <editor [init]="froalaOptions" name="text" [(ngModel)]="menuItemObj.text"></editor>
    </li>
  </ul>
</ng-template>

以及组件中的函数：

doAddMenuItem(formData) {
  console.log(formData.value);
}

解决方法

似乎 NgForm 只能跟踪嵌套模板中的控件。

要使其工作，您需要在表单标签中移动 #MsgRef 模板。

Project_BM

为了使您的控件真正可重用，我建议您通过实现 ControlValueAccessor 接口来创建自定义表单控件。因此，您将能够以任何形式使用此自定义控件：

<form (submit)="doAddMenuItem(postForm)" #postForm="ngForm">
  <ng-template [ngTemplateOutlet]="MsgRef"></ng-template>
  <button class="button medium button__save">Save</button>

  <ng-template #MsgRef>...</ng-template>
</form>

型号：

<form (submit)="doAddMenuItem(postForm)" #postForm="ngForm">
  <app-menu-item-control name="menuItem" [(ngModel)]="menuItem"></app-menu-item-control>
  <button class="button medium button__save">Save</button>
</form>

MenuItem 表单控件：

export interface MenuItem {
    title: string;
    symbol: string;
    moreInfoLink: string;
    text: string;
}

angular angular ng-template