Angular (4) : transfer ngForm & ngModelGroup from parent to child and use form validation

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>

子 Component.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 .我自己没有尝试过，但我不明白为什么它不起作用 - 而且它非常简单和优雅。