Angular 验证在表单初始化时立即触发答案

【问题标题】：Angular validation firing immediately on form initializationAngular 验证在表单初始化时立即触发
【发布时间】：2022-10-07 16:07:21
【问题描述】：

我有一个带有一些验证器的表单控件nameFormControl 和一个updateOn 属性：

ngOnInit(): void {
    this.myFormGroup = this.fb.group({
      nameFormControl: ["john", {
        validators: [Validators.required, Validators.minLength(10)]
        , updateOn: "blur"
      }]
    });
  }

我只想在模糊事件上触发验证器。但是当表单第一次加载时，验证器会立即触发并将nameFormControl 和myFormGroup 的无效属性设置为true，因为nameFormControl 的初始值长度是4。我怎样才能跳过触发验证器直到模糊操作发生？

我在用：

Angular CLI: 14.2.4
Node: 14.17.3
Angular: 14.2.4

【问题讨论】：

标签： javascript angular

【解决方案1】：

一种解决方案是实现您自己的 Validator 函数并在组件中使用布尔值，该布尔值在第一次完成时停用 Validator 内的控件（当 Angular 在一开始就运行验证器时）。

就像是：

public isFirstControl:boolean = true;

和：

customValidator(): ValidatorFn {
    return (control:AbstractControl) : ValidationErrors | null => {
      if(this.isFirstControl){
        this.isFirstControl = false;
        return null;
      }

      //Your actual validation logic here
      if(toto){
        return { required: true };
      }
      return null;
    }
  }

【讨论】：