0

我正在尝试创建一个可以通过使用 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);
}
4

1 回答 1

0

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

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

<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>

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

<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>

模型：

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

MenuItem 表单控件：

@Component({
    selector: 'app-menu-item-control',
    template: `
        <ul class="list">
            <li>Titel:</li>
            <li><input type="text" name="title" [(ngModel)]="menuItem.title" (ngModelChange)="onModelChange()"></li>
        </ul>
        <ul class="list">
            <li>Symbol:</li>
            <li><input type="text" name="symbol" [(ngModel)]="menuItem.symbol" (ngModelChange)="onModelChange()"></li>
        </ul>
        <ul class="list">
            <li>Meer weten link:</li>
            <li><input type="text" name="moreInfoLink" [(ngModel)]="menuItem.moreInfoLink" (ngModelChange)="onModelChange()"></li>
        </ul>
        <ul class="list">
            <li>Bericht:</li>
            <li>
                <textarea name="text" [(ngModel)]="menuItem.text" (ngModelChange)="onModelChange()"></textarea>
            </li>
        </ul>
    `,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => MenuItemControlComponent),
            multi: true,
        },
    ],
})
export class MenuItemControlComponent implements ControlValueAccessor {

    menuItem: MenuItem = { moreInfoLink: '', symbol: '', text: '', title: '', };

    onChange: (item: MenuItem) => void;

    registerOnChange(fn: any): void { this.onChange = fn; }

    registerOnTouched(fn: any): void {}

    writeValue(item: MenuItem): void { this.menuItem = { ...item }; }

    onModelChange(): void {
        this.onChange(this.menuItem);
    }
}
于 2021-07-07T15:44:58.690 回答