javascript - 密码匹配的角度异步自定义验证器在我的登录表单中不起作用

Question

我正在尝试为我的表单制作一个自定义验证器，但我在返回时遇到了一些问题。

我的表格：

ngOnInit() {
this.signinForm = this.formBuilder.group({
  userName:[null, [Validators.required, Validators.minLength(3)]],
  userEmail:[null, [Validators.email,Validators.required], [this.noteValidators.emailCheckValidator(true)]],
  userPassword: this.formBuilder.group({
    password:[null, Validators.required],
    repeat:[null, Validators.required]
  }, {validator: this.noteValidators.checkMatchPassword()})
})}

我的验证器正在服务中。我有一个自定义验证器正在工作，我试图让另一个像这样：自定义验证器 OK：

public emailCheckValidator(exists:boolean) : AsyncValidatorFn {

    return (control: AbstractControl): Observable<{[key: string]: any } | null> => { 
      return control.valueChanges.pipe(
        debounceTime(500),
        take(1),
        switchMap( () => this.httpNote.checkEmail(control.value).pipe(
          map( res => {
            if(res == exists ){
              return { checkEmail: res };
            }
            return null;
          })
        ))
      )
    }
  }

和有错误的验证器：

public checkMatchPassword():AsyncValidatorFn {

    return (group:FormGroup): Observable<{[key:string]: any} | null> =>{

      return group.valueChanges.pipe(
        debounceTime(500),
        distinctUntilChanged(),
        take(1),
        map( (res) => {
              console.log(res);
              if(group.get('password').value === group.get('repeat').value) {
                return null;
              } 
              return  { passwordMatch: false };
          }
        )
      )//pipe
    }
  }

是否有另一种方法来编写没有 HTTP 请求的自定义验证器>

我唯一的条件是将所有验证者组织成一个服务。

标签： javascriptangulartypescriptrxjs