Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/30.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/jquery-ui/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
是否可以在Angular中添加跨字段异步验证?_Angular_Angular Reactive Forms_Angular Forms - Fatal编程技术网

是否可以在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。当然还有其他方法,但我认为这是正确的方法。无论如何,我想知道是否有可能在表单级别添加异步验证器。这是一个解决方案。非常感谢。