Angular 表单校验触发时机

文章转自我的语雀：https://www.yuque.com/liuyin-zzwa0/angular/form-validation-time

In reactive forms

在响应式表单中会使用到三个类FormBuilder、FormGroup、FormControl，这三个类均有内置了AbstractControlOptions

interface AbstractControlOptions {
  validators?: ValidatorFn | ValidatorFn[] | null
  asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[] | null
  updateOn?: 'change' | 'blur' | 'submit'
}

方式一：使用FormGroup、FormControl

this.validateForm = new FormGroup({
  userName: new FormControl(null, {
    validators: [Validators.required, Validators.pattern(/^[0-9]{4,8}$/)],
    updateOn: 'blur'
  }),
  password: new FormControl(null, [Validators.required, Validators.pattern(/^[0-9a-zA-Z]{6,8}$/)]),
}, { updateOn: 'submit' });

方式二：使用FormBuilder、FormControl

this.validateForm = this.fb.group({
  userName: new FormControl(null, {
    validators: [Validators.required, Validators.pattern(/^[0-9]{4,8}$/)],
    updateOn: 'blur'
  }),
  password: [null, {
    validators: [Validators.required, Validators.pattern(/^[0-9a-zA-Z]{6,8}$/)],
    updateOn: 'submit'
  }],
}, { updateOn: 'submit' });

In Template-driven forms

NgForm中使用ngFormOptions

updateOn：为所有子级的 NgModel 设置 updateOn 的默认值（除非子 NgModel 通过 ngModelOptions 显式指定了这个值）。 可能的值有：'change' | 'blur' | 'submit'。

<form [ngFormOptions]="{updateOn: 'blur'}">
   <input name="one" ngModel>  <!-- this ngModel will update on blur -->
</form>

NgModel中使用ngModelOptions

跟踪该 ngModel 实例的配置项。
name：用来设置表单控件元素的 name 属性的另一种方式。
standalone：如果为 true，则此 ngModel 不会把自己注册进它的父表单中，其行为就像没在表单中一样。默认为 false。
updateOn: 用来定义该何时更新表单控件的值和有效性。默认为 change。可能的取值为：'change' | 'blur' | 'submit'。

<form>
  <my-person-control 
    name="Nancy" 
    ngModel
    [ngModelOptions]="{name: 'user', updateOn: 'submit'}"
  >
  </my-person-control>
</form>

总结

以上的方法均可以实现更新表单控件的值和有效性，父级的 updateOn 属性可以为每个子级设置校验的时机，子级本身的 updateOn 属性可为子级本身设置校验时机。使用时请注意项目Angular的版本！