angular - Q : How to use Angular 2 template form with ng-content?

Question

难道不可能在 ng-content 中包含表单输入元素并将其“连接”到父组件的 ngForm 实例吗？

将这个基本模板作为父组件:

<form (ngSubmit)="onSubmit(editForm)" #editForm="ngForm" novalidate>               
<ng-content></ng-content>
<button type="submit">Submit</button>
</form>

然后在“ng-content”中的子组件中，像这样:

<input type="text" [(ngModel)]="user.firstName" #firstName="ngModel" name="firstName" required minlength="2">

在提交父表单时，子控件不可用，这也意味着子组件中的脏/验证不会反射(reflect)在父表单上。

这里缺少什么？

Answer 1

此时您很有可能想出了另一个解决方案，但我只是想出了一个方法来做到这一点。希望它能对您或其他人有所帮助。

import { NgModel } from '@angular/forms';
import { Component, ContentChildren, ViewChild, QueryList, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-custom-form',
  template: `
    <form (ngSubmit)="onSubmit(editForm)" #editForm="ngForm" novalidate>               
      <ng-content></ng-content>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class MyCustomFormComponent implements AfterViewInit {
  @ContentChildren(NgModel) public models: QueryList<NgModel>;
  @ViewChild(NgForm) public form: NgForm;

  public ngAfterViewInit(): void {
    let ngContentModels = this.models.toArray();
    ngContentModels.forEach((model) => {
      this.form.addControl(model);
    });
  }

  public onSubmit(editForm: any): void {
    console.log(editForm);
  }
}

然后你可以像这样在你的模板中使用它:

<my-custom-form>
  <input name="projectedInput" ngModel>
</my-custom-form>

提交表单时，您会看到 projectedInput 表单控件已添加到 NgForm。

注意:我只尝试添加来自 AfterViewInit 生命周期 Hook 的预计输入。它可能会更早工作，我不确定。这样做也可能存在一些我不知道的问题。 YMMV.