Angular 多次调用验证器函数

Question

我在项目中使用 Reactive 表单，我对表单组验证器有这种奇怪的行为。我做了一个示例来向您展示问题

export class AppComponent {
  detailsForm: any;
  constructor(private formBuilder: FormBuilder) {
    this.detailsForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required]
    }, { validator: [this.ValidForm] });
  }
  ValidForm = (formGroup: AbstractControl) => {
    console.log('hello');
  }
}

<form [formGroup]="detailsForm" action="" id="maforme">
  <input type="text" formControlName="firstName">
  <input type="text" formControlName="lastName">
  <button type="button">Save</button>
</form>

输出为

hello app.component.ts:18
hello app.component.ts:18
hello app.component.ts:18
hello app.component.ts:18

我的问题是为什么在这种情况下验证器被调用了 4 次？

Answer 1

我认为，您需要在此行中将 AbstractControl 替换为 FormGroup - ValidForm = (formGroup: AbstractControl)。

Answer 2

每次在 UI 上呈现控件时，验证器都是运行，当它作为验证器应用到 formGroup 上时，验证器是一次。您可以通过删除 UI.

上的控件来验证这一点

Answer 3

我使用了您的示例，发现当应用程序加载时，会调用验证程序：

控件中的FormGroup
html
html
html

您可以通过在表单中注释掉整个 html 来重现此内容，然后将其部分返回并查看过程中的结果。

我认为这是错误的行为，但 Angular 是这样工作的。我用 7.1.0 版本测试过。

Angular 多次调用验证器函数

Angular Validator function called multiple times

angular

angular-reactive-forms

angular-forms