Question

当前，我正在编写一个验证器，以防止用户使用其后三个密码之一。我的验证器接受了服务，并进行了REST API调用。但是，如果用户选择较旧的密码，则错误消息不会在GUI中显示。

验证器功能

export function passwordHistoryValidator(
  passwordControlName = 'password',
  passwordConfirmControlName = 'passwordConfirm',
  resetkey: string,
  userService: UsersService
): ValidatorFn {

  return (formGroup: FormGroup): ValidationErrors => {
    const passwordValue: string = formGroup.get(passwordControlName).value;
    const passwordConfirmValue: string = formGroup.get(passwordConfirmControlName).value;

    if (passwordValue && passwordConfirmValue && passwordValue.localeCompare(passwordConfirmValue) === 0 &&
      passwordValue.length >= 8) {

      userService.getUserPasswordHistory(resetkey, passwordValue).subscribe(
        userPasswordHistory => {
          console.log(userPasswordHistory.passwordInHistory);
          if (userPasswordHistory.passwordInHistory) {
            return { passwordFoundInHistory: true };
          }
        },
        err => {
          console.log("error occured");
        }
      );
    }
    return null;
  };
}

服务方法getUserPasswordHistory

getUserPasswordHistory(resetKey: string, newPassword: string) {
    // return this.http.get<User>(`${this.config.api}/users/reset-key/${resetKey}`);
    return this.http.get<PasswordResetHistoryStatus>(`assets/passwordInHistory.json`);
  }

在组件ngOnit方法中注册验证器passwordHistoryValidator

 ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.key = params['key'];
    });
    this.keyMissing = !this.key;

    if (this.key) {
      this.usersService.getUserbyResetKey(this.key).subscribe(
        (user) => {
          this.formGroup.setValidators(Validators.compose([this.formGroup.validator,
          usernamePasswordValidator('password', 'confirmPassword', user),
            , passwordHistoryValidator('password', 'confirmPassword', this.key, this.usersService)]));
        },
        error => { this.keyMissing = true; }
      );
    }
  }

ui html代码如下

  <alert type="danger" dismissable="false" 
         *ngIf="formGroup.hasError('passwordFoundInHistory')">
    {{ 'VALIDATION.ERRORS.PASSWORD_FOUND_IN_HISTORY' | translate }}
  </alert>

我期望函数passwordHistoryValidator返回{passwordFoundInHistory：true}，但是即使条件为userPasswordHistory.passwordInHistory为true，它也始终返回null。我认为这是因为使用了可观察物。任何想法如何使其工作？

感谢任何帮助非常感谢

Answer 1

我最终可以使用异步验证程序解决此问题。

所以我已将验证器功能从同步验证器重写为异步验证器

export function passwordHistoryValidator(
  passwordControlName = 'password',
  passwordConfirmControlName = 'passwordConfirm',
  resetkey: string,
  userService: UsersService
): AsyncValidatorFn {

  return (formGroup: FormGroup): Observable<ValidationErrors> | null => {
   const passwordValue: string = formGroup.get(passwordControlName).value;
   const passwordConfirmValue: string = formGroup.get(passwordConfirmControlName).value;
    if (passwordValue && passwordConfirmValue && passwordValue.localeCompare(passwordConfirmValue) === 0 &&
      passwordValue.length >= 8) {

       return  userService.getUserPasswordHistory(resetkey, passwordValue).map(
        response => (response.passwordInHistory ? {passwordFoundInHistory: true }:null)
        );
  }
    return null;
  } 
}

我还将该验证器注册为组件中的异步验证器。

export class ResetPasswordComponent implements OnInit {

      ngOnInit() {
        this.route.queryParams.subscribe(params => {
          this.key = params['key'];
        });
        this.keyMissing = !this.key;

        if (this.key) {
          this.usersService.getUserbyResetKey(this.key).subscribe(
            (user) => {  
              this.formGroup.setValidators(Validators.compose([this.formGroup.validator,
              usernamePasswordValidator('password', 'confirmPassword', user),
              ]));
              this.formGroup.setAsyncValidators(passwordHistoryValidator('password', 'confirmPassword', this.key, this.usersService));
            },
            error => { this.keyMissing = true; }
          );
        }
      }

}

角度验证错误没有显示在gui上？

验证器功能

服务方法getUserPasswordHistory

1 个答案: