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

每次在UI上呈现控件时，该验证程序都会运行，并且在将其用作formGroup上的验证程序时，验证程序将运行一次。您可以通过删除UI上的控件来验证这一点。

Answer 2

我以您的示例为例，发现在应用程序加载时，将要求验证器：

控制中的FormGroup
HTML中的FormGroup
HTML中的FormControl
HTML中的FormControl

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

我认为这是错误的行为，但是Angular可以这样工作。我使用7.1.0版进行了测试。

Answer 3

我认为，您需要在此行中用FormGroup替换AbstractControl-ValidForm =（formGroup：AbstractControl）。

多次调用Angular Validator函数

3 个答案: