Angular（4）：将 ngForm & ngModelGroup 从父级转移到子级并使用表单验证

Question

我想将我的 ngForm 和 ngModelGroup 从父组件转移到子组件，并在子组件中使用表单验证功能。

父组件.html：

<md-step [stepControl]="createIntegrationPartnerRequestGroup">
  <form #createIntegrationPartnerRequestForm="ngForm">
    <div ngModelGroup="createIntegrationPartnerRequestGroup" #createIntegrationPartnerRequestGroup="ngModelGroup">
      <div class="row p-row-padding">
        <div class="col-xs-12">
          <ng-template mdStepLabel>
            {{'INTEGRATION_PARTNER_REQUEST' | translate}}
          </ng-template>
        </div>
      </div>
      <integration-partner-request [form]="createIntegrationPartnerRequestForm"
                                   [model]="createIntegrationPartnerRequestGroup"></integration-partner-request>
    </div>
  </form>
</md-step>

子组件.html（摘录）：

<div class="row p-row-padding">
  <div class="col-xs-6">
    <md-input-container class="p-full-width">
      <input mdInput
             ngModel name="name"
             #name="ngModel"
             required
             (change)="showForm()"
             placeholder="{{'WELCOME_WIZARD.PARTNER_NAME' | translate}}">
      <md-error *ngIf="name.touched && name.invalid">
        <span *ngIf="name.errors.required">
          {{'WELCOME_WIZARD.FIELD_REQUIRED' | translate}}
        </span>
        <span *ngIf="name.errors.pattern">
          {{'WELCOME_WIZARD.INVALID_FIELD_FORMAT' | translate}}
        </span>
      </md-error>
    </md-input-container>
  </div>
  <div class="col-xs-6">
    <md-input-container class="p-full-width">
      <input mdInput
             ngModel name="status"
             #status="ngModel"
             placeholder="{{'WELCOME_WIZARD.PARTNER_STATUS' | translate}}">
      <md-error *ngIf="status.touched && status.invalid">
        <span *ngIf="status.errors.required">
          {{'WELCOME_WIZARD.FIELD_REQUIRED' | translate}}
        </span>
        <span *ngIf="status.errors.pattern">
          {{'WELCOME_WIZARD.INVALID_FIELD_FORMAT' | translate}}
        </span>
      </md-error>
    </md-input-container>
  </div>
</div>

子组件.ts：

export class ChildComponent implements OnInit {

  @Input() public form: FormGroup;
  @Input() public model: NgModelGroup;
  @Input() public type: string;

  public formResult;
  public modelResult;

  constructor() {
  }

  ngOnInit() {
    this.formResult = this.form;
    this.modelResult = this.model;
  }

  public showForm() {
    console.log(this.formResult);
    console.log(this.modelResult);
  }

}

子组件中还有一个按钮，只有在必填字段不为空时才有效，但事实并非如此，因为modelResult 没有任何字段值...：

<button
  class="p-full-width"
  md-raised-button
  [disabled]="formResult.invalid"
  mdStepperNext>
  {{'WELCOME_WIZARD.NEXT' | translate}}
</button>

我做错了什么？

Answer 1

你做的一切都是正确的——除了 Angular 2/4 不支持它。如果您查看NgModel 的源代码，您会发现它包含这样的定义：

constructor(@Optional() @Host() parent: ControlContainer,
          ...)

这意味着 DI 容器只会在第一个 @Host() 之前查找此依赖项 - 你猜怎么着？ - 你的子组件。这意味着 NgModel 不会找到您的表单，也不会注册自己。每个@Component() 都是一个主机，所以没有办法让它像这样工作。

所以，你的选择在这里真的很有限：将所有表单部分收集到一个组件中，或者构建你自己的 NgModel 实现。

正如@yurzui 指出的（谢谢！）有一个解决方案：click。我自己没有尝试过，但我不明白为什么它不起作用 - 它非常简单和优雅。