angular4输入有效性_Angular 表单校验触发时机

In reactive forms

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'。

NgModel中使用ngModelOptions

跟踪该 ngModel 实例的配置项。

name：用来设置表单控件元素的 name 属性的另一种方式。

standalone：如果为 true，则此 ngModel 不会把自己注册进它的父表单中，其行为就像没在表单中一样。默认为 false。

updateOn: 用来定义该何时更新表单控件的值和有效性。默认为 change。可能的取值为：'change' | 'blur' | 'submit'。

name="Nancy"

ngModel

[ngModelOptions]="{name: 'user', updateOn: 'submit'}"

>

总结

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