угловая ошибка проверки не отображается в графическом интерфейсе?

Question

В настоящее время я пишу валидатор, чтобы запретить пользователям использовать один из последних 3 паролей.мой валидатор берет сервис и делает остальные вызовы API.Однако сообщения об ошибках не отображаются в графическом интерфейсе, если пользователь выбирает более старый пароль.

функция валидатора

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`);
  }

регистрация пароля валидатораHistoryValidatorв компонентах метод ngOnit

 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; }
      );
    }
  }

HTML-код выглядит следующим образом:

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

Я ожидаю, что функция passwordHistoryValidator вернет {passwordFoundInHistory: true}, однако она всегда будет возвращать ноль, даже еслиесли условие userPasswordHistory.passwordInHistory имеет значение true.Я думаю, это из-за использования наблюдаемых.есть идеи как заставить это работать?

Благодарю за помощь, большое спасибо

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; }
          );
        }
      }

}