Validators不会自动删除错误。如果验证器返回多个错误,则错误仍将存在,直到验证器返回一个空对象表示无错误。
您可以使用Custome validators来实现在值更改时删除错误的功能。
示例代码:
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { return (control: AbstractControl): {[key: string]: any} | null => { const forbidden = nameRe.test(control.value); return forbidden ? {'forbiddenName': {value: control.value}} : null; }; }
初始化表单:
this.signupForm = new FormGroup({ 'userData': new FormGroup({ 'username': new FormControl(null, [Validators.required, forbiddenNameValidator(/admin/)]) }), });
在组件中监听值更改:
this.signupForm.get('userData.username').valueChanges.subscribe(value => { if (this.signupForm.get('userData.username').errors) { this.signupForm.get('userData.username').setErrors(null, {emitEvent: false}); } });
在上面代码中,当用户名字段发生更改时,我们订阅了valueChanges事件。在此事件中,我们检查用户名字段是否存在错误。如果用户名字段存在错误,则将其设置为null。(emitEvent: false表示,它不会触发其他订阅器)