Angular 多次调用验证函数答案

【问题标题】：Angular calls a validation function for many timesAngular 多次调用验证函数
【发布时间】：2020-07-29 09:17:50
【问题描述】：

我有角形。

当我打开应用程序时，控制台是 log in fooValidation 四次没有我不要什么。

in fooValidation
in fooValidation
in fooValidation
in fooValidation

为什么？这是设计的吗？如何使其仅在表单提交后或焦点在指定字段时执行？

import { Component } from "@angular/core";
import { FormGroup, FormControl } from '@angular/forms';

const fooValidation = () => {
  console.log('in fooValidation ');

  // check two fields here
  return { error: true };
}

@Component({
  selector: "my-app",
  template: `
      <form [formGroup]="profileForm">
    
        <label>
          First Name:
          <input type="text" formControlName="firstName">
        </label>
  
        <label>
          Last Name:
          <input type="text" formControlName="lastName">
        </label>
  
      </form>
    `
})
export class AppComponent {
  name = "Angular";

  profileForm = new FormGroup({
    firstName: new FormControl(""),
    lastName: new FormControl("")
  }, {
    validators: [fooValidation]
  });
}

stackblitz example

【问题讨论】：

标签： angular angular-reactive-forms angular2-form-validation

【解决方案1】：

这是预期的。验证应该非常简单，所以通常不是问题。现在为什么有 4 个：

在 typescript 中创建 FormGroup。它已创建并应检查以定义它是否处于错误状态
[formGroup] 指令注册控制并再次调用验证，因为在某些情况下某些内容可能会发生变化（不确定究竟是哪一个，但可能是某些问题导致该行为使一切正常）
和 4. formControlName 指令完全相同

【讨论】：

【解决方案2】：

我遇到了同样的问题，似乎通过在 ngAfterViewChecked 生命周期钩子上添加组验证器来解决它。

public ngAfterViewChecked(): void {
   myFormGroup.setValidators([validator1(), validator2()])
}

【讨论】：