是否可以在Angular中添加跨字段异步验证?
我正在尝试将异步验证添加到表单级别(用于跨字段验证)。但是验证功能没有被触发。是否可以在表单级别添加异步验证?或者我的验证有什么问题 //我的表格是否可以在Angular中添加跨字段异步验证?,angular,angular-reactive-forms,angular-forms,Angular,Angular Reactive Forms,Angular Forms,我正在尝试将异步验证添加到表单级别(用于跨字段验证)。但是验证功能没有被触发。是否可以在表单级别添加异步验证?或者我的验证有什么问题 //我的表格 creatForm(): void { this.registerForm = this.fb.group({ firstName: [null, [Validators.required, Validators.minLength(3), Validators.maxLength(15)]], lastName: [
creatForm(): void {
this.registerForm = this.fb.group({
firstName: [null, [Validators.required, Validators.minLength(3), Validators.maxLength(15)]],
lastName: [null, [Validators.required, Validators.minLength(3), Validators.maxLength(15)]],
phone: [null,
[Validators.required, Validators.minLength(10), Validators.maxLength(10)],
[this.phoneValidity.checkPhoneValidity()]],
email: [null,
[Validators.required, Validators.email],
[this.emailValidity.checkEmailValidity()]],
password: [null, [Validators.required, Validators.minLength(3), Validators.maxLength(15)]],
rePassword: [null, [Validators.required]]
}, { /*validators: [PasswordRePasswordValidator],*/ asyncValidators: [PasswordRePasswordValidator]});
}
//我的验证器
export function PasswordRePasswordValidator(control: FormGroup): Observable<ValidationErrors | null> {
const password = control.get('password').value;
const rePassword = control.get('rePassword').value;
console.log('password', password);
console.log(rePassword);
let v: Observable<ValidationErrors | null>;
return v = new Observable(observer => {
if (password && rePassword) {
console.log('password exists');
if (password === rePassword) {
observer.next(null);
observer.complete();
} else {
setTimeout(() => {
observer.next({unMatchPassword : 'Password Doesn\'t Match'});
observer.complete();
}, 1500);
}
} else {
console.log('password isnt exists')
observer.next(null);
observer.complete();
}
});
}
导出函数PasswordRePasswordValidator(控件:FormGroup):可观察{
const password=control.get('password')。值;
const rePassword=control.get('rePassword').value;
console.log('password',password);
控制台日志(rePassword);
设v:可观察;
返回v=新的可观察对象(观察者=>{
如果(密码和重新密码){
log('password exists');
如果(密码===重新密码){
observer.next(空);
observer.complete();
}否则{
设置超时(()=>{
next({unMatchPassword:'密码不匹配'});
observer.complete();
}, 1500);
}
}否则{
console.log('密码不存在')
observer.next(空);
observer.complete();
}
});
}
为了验证密码和确认密码,你可以使用小技巧。使用密码值设置确认密码输入的模式。然后它会自动验证
为什么要这样做?只是想让事情变得比实际需要的更复杂?我可以看到,如果您要访问服务器进行验证,那么可以将其设置为异步,但是您没有。KISS:我正在验证密码和重新密码字段,以查看它们是否匹配。我发送setTimeout()是为了在错误发生之前给用户一点时间,这样做感觉很传统。要使用setTimeout,我需要发送promise或observable。当然还有其他方法,但我认为这是正确的方法。无论如何,我想知道是否有可能在表单级别添加异步验证器。这是一个解决方案。非常感谢。