在Angular中,如果有多个验证器(Validators)存在于一个表单控件(form control)中,则这些验证器将在同一时间内一起被触发。这个问题的解决方案是,使用asyncValidators代替Validators来实现异步验证,这样就可以避免两个验证器同时触发的冲突。
示例代码如下:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, AsyncValidatorFn, AbstractControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-my-form',
template: `
`,
})
export class MyFormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
myInput: ['', { validators: Validators.required, asyncValidators: [this.myAsyncValidator()], updateOn: 'blur' }]
});
}
myAsyncValidator(): AsyncValidatorFn {
return (control: AbstractControl): Observable<{ [key: string]: any }> => {
return Observable.of(null).delay(2000).map(() => {
if (control.value === 'something') {
return { asyncError: true }; // 触发错误
}
return null;
});
};
}
onSubmit() {
console.log(this.myForm.value);
}
}
在这个例子中,我们使用了asyncValidators
来实现异步验证。注意myAsyncValidator
返回的是一个Observable
,而在其中使用了Observable.of(null).delay(2000)
来模拟一个异步的网络请求操作,在这个例子中