Angular表单初始化时验证立即触发，如何仅在失焦时触发？

针对你遇到的设置updateOn: "blur"但表单加载时就触发验证的问题，本质是Angular表单初始化时会自动执行一次验证流程，不受updateOn配置影响。以下是几种可行的解决方案：

方法一：控制初始值设置的事件触发 #

初始化表单时先设为空值，再通过setValue设置初始值并禁用事件触发，避免初始验证：

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

    // 设置初始值但不触发验证事件
    this.myFormGroup.get('nameFormControl')?.setValue('john', { emitEvent: false });
}

方法二：自定义验证器，仅在控件触碰后执行验证 #

包装原有验证器，只有当控件被标记为touched（失焦后）才执行验证逻辑：

// 自定义验证器包装函数
function validateOnBlur(validators: ValidatorFn[]): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    // 未触碰时跳过验证
    if (!control.touched) {
      return null;
    }
    // 执行所有传入的验证器
    for (const validator of validators) {
      const error = validator(control);
      if (error) {
        return error;
      }
    }
    return null;
  };
}

// 表单初始化代码
ngOnInit(): void {
    this.myFormGroup = this.fb.group({
      nameFormControl: ["john", {
        validators: validateOnBlur([Validators.required, Validators.minLength(10)]),
        updateOn: "blur"
      }]
    });
}

方法三：初始化后重置控件验证状态 #

手动将控件标记为未触碰、未修改，并清空初始错误：

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

    const nameControl = this.myFormGroup.get('nameFormControl');
    if (nameControl) {
      // 标记控件为未触碰、未修改
      nameControl.markAsUntouched();
      nameControl.markAsPristine();
      // 清空初始验证错误
      nameControl.setErrors(null);
    }
}

注意：此方法需配合表单提交逻辑，在提交前手动触发验证（如调用nameControl.updateValueAndValidity()），避免提交未验证的表单。

内容的提问来源于stack exchange，提问作者Sajjad raihan