gui 上未显示角度验证错误？

debugcn 发表于 Dev

普拉桑

目前我正在编写一个验证器来防止用户使用他们最后 3 个密码之一。我的验证器接受一项服务，并进行一次 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 } ，但是它总是返回 null 即使条件是 userPasswordHistory.passwordInHistory is true 。我认为这是因为使用了 observables。知道如何使它工作吗？

感谢任何帮助非常感谢你

普拉桑

我最终能够通过使用异步验证器来解决这个问题。

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

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

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。