Есть ли способ проверить текущий пароль в angular с реактивной формой с помощью настраиваемого валидатора

Я создал форму смены пароля с четырьмя полями, включая «текущий пароль», «новый пароль», «подтверждение пароля» и скрытое поле «флаг пароля». Проверка нового пароля и подтверждение пароля работают нормально (с этим проблем нет). Текущий пароль хранится в БД в зашифрованном виде. То, что я делаю здесь, при каждом нажатии клавиши я отправляю в приложение загрузки Spring и проверяю соответствие. Если и текущий пароль, и введенный пароль совпадают, он вернет истину, в противном случае - ложь. Это логическое значение сохраняется в скрытом поле ввода. Затем я проверяю, пока условие не будет выполнено в пользовательском валидаторе. Но результат не такой, как хотелось бы.

Это работает в Windows 10, под управлением Angular 6, Spring boot и Mysql.

Validator.ts

export function CheckPswd(control: AbstractControl) {
    if (control && (control.value !== null || control.value !== undefined)) {

        const passControl = control.root.get('passflag');
        if (passControl) {
            if(passControl.value)
                return null;
            else
                return {
                    cfpswdmismatch: true
                };
        }
    }
    return null;
}

TS файл

 pswdForm: FormGroup = this.fb.group({
    curpass: ['', [Validators.required,CheckPswd]],
    passflag:[this.flag],
    newpass: ['', [Validators.required]],
    confpass: ['', [Validators.required, MatchPswd]],
  });
  getCurrPswd() {
    let pswd = this.pswdForm.get('curpass').value;
    this.service.checkPswd(this.userID, pswd).subscribe(data => {
      if (data == false)
        this.flag = false;
      else
        this.flag = true;
      //console.log(this.flag)
      this.pswdForm.get('passflag').setValue(this.flag);
    })

  }

HTML-файл

    <form [formGroup]="pswdForm" (ngSubmit)="submitPswd()">
    <div class="modal-body">
        <mat-form-field style="display: block;width: 220px;">
          <input matInput type="password" name="cpswd" placeholder="Current Password" formControlName="curpass" (blur)="getCurrPswd()" required>
          <mat-error *ngIf="pswdForm.controls.curpass.errors?.cfpswdmismatch && !pswdForm.controls.curpass.errors?.required">
            Current Password not matching
          </mat-error>
        </mat-form-field>
        <input type="hidden" name="boolflag" formControlName="passflag">
        <mat-form-field style="display: block;width: 220px;">
          <input matInput type="password"  name="npswd" placeholder="New Password" formControlName="newpass">
          <mat-error *ngIf="pswdForm.controls.newpass.errors?.required">
            Field is required
          </mat-error>
        </mat-form-field>
        <mat-form-field style="display: block;width: 220px;">
          <input matInput type="password" name="cfpswd" placeholder="Confirm Password" formControlName="confpass">
          <mat-error *ngIf="pswdForm.controls.confpass.errors?.pswdmismatch && !pswdForm.controls.confpass.errors?.required && pswdForm.controls.newpass.touched">
              Password is not matching
            </mat-error>
            <mat-error *ngIf="pswdForm.controls.confpass.errors?.required">
              Field is required
            </mat-error>
        </mat-form-field>

    </div>
    <div class="modal-footer">
        <div>{{msg}}</div>
      <button mat-raised-button type="submit" [disabled]="pswdForm.invalid" btn-outline-secondary>
        Submit
      </button>

    </div>
  </form>

Я ожидаю, что в поле текущего пароля должна отображаться ошибка, если пароль введен неверно.


angular angular-reactive-forms angular-validation
person Sahal    schedule 22.07.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете создать свой собственный Async Validator.

Официальные документы: https://angular.io/guide/form-validation#async-validation

И пример:

@Injectable({ providedIn: 'root' })
export class UniqueAlterEgoValidator implements AsyncValidator {
  constructor(private authService: AuthService) {}

  validate(
    ctrl: AbstractControl
  ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    return this.authService.isPasswordValid(ctrl.value, user).pipe(
      catchError(() => null)
    );
  }
}
person Eliran Eliassy    schedule 22.07.2019
comment
Обычно, как проверяется текущий пароль? - person Sahal; 22.07.2019
comment
Вы должны реализовать это на сервере. - person Eliran Eliassy; 22.07.2019
comment
Здесь я тоже делаю то же самое. Но как это сделать возможным для печати сообщения об ошибке? - person Sahal; 22.07.2019