Question

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

父组件：

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

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

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

Angular（4）：转移ngForm＆amp;从父到子的ngModelGroup并使用表单验证

1 个答案: