Question

在以下示例中，是否有办法仅验证一个form-step输入？

<form #f="ngForm">
  <form-step>
     <input name="name" required />
     <input name="email" required />
  </form-step>
  <form-step>
     <input name="phone" required />
     <input name="somethingElse" required />
  </form-step>
</form>

和FormStepComponent一样（简化）：

template: `
<form #stepForm="ngForm">
  <ng-content></ng-content>
</form>
`

@ViewChild('stepForm') _form;
public get invalid(): boolean {
  return this._form.invalid;
}

我想在表单步骤组件上实现函数invalid，如果任何包含的输入根据它们的指令无效，就像f.invalid对整个表单一样。

提供的示例不起作用，因为输入绑定到最顶层的形式。

Answer 1

经过一番尝试后，我最终在每个form-step

上设置了ngModelGroup

<form #f="ngForm">
  <form-step ngModelGroup="mg1">
     <input name="name" required />
     <input name="email" required />
  </form-step>
  <form-step ngModelGroup="mg2">
     <input name="phone" required />
     <input name="somethingElse" required />
  </form-step>
</form>

使用ContentChild

访问它

import { ContentChild } from '@angular/core';
import { NgModelGroup } from '@angular/forms';

@Component({
    selector: 'form-step',
    template: `
    <div>
      <!-- ... -->
      <ng-content></ng-content>
    </div>
  `
})
export class FormStepComponent {    

  //...

  @ContentChild(NgModelGroup) _modelGroup;
  public get invalid(): boolean {
    return this._modelGroup.invalid;
  }
}

这只是一种“最好的猜测”方法。我想避免在所有ngModelGroup上使用form-step指令，但我不知道如何隐式创建它。

Angular 2中的部分表单验证

1 个答案: