Невозможно получить updateOn 'blur' для работы - PullRequest
Новая
       10

Невозможно получить updateOn 'blur' для работы

0 голосов
/ 10 июля 2019

В настоящее время у меня есть функция проверки, чтобы проверить, совпадают ли пароль и подтвердить пароль. Кажется, это работает нормально, если я не добавляю updateOn blur, однако, когда я добавляю blur, он не попадает в функцию match, что приводит к тому, что проверка не работает. Не уверены, что я делаю не так?

Вот функция для проверки совпадения паролей 

```import { FormGroup } from '@angular/forms';

// custom validator to check that two fields match
export function MustMatch(controlName: string, matchingControlName: string) {
  return (formGroup: FormGroup) => {
    const control = formGroup.controls[controlName];
    const matchingControl = formGroup.controls[matchingControlName];

    if (matchingControl.errors && !matchingControl.errors.mustMatch) {
      // return if another validator has already found an error on the matchingControl
      return;
    }

    // set error on matchingControl if validation fails
    if (control.value !== matchingControl.value) {
      matchingControl.setErrors({ mustMatch: true });
    } else {
      matchingControl.setErrors(null);
    }
  };
}
```

Вот HTML 

``` <div class="card-block">
      <p class="text-success" *ngIf="success">Your password has successfully been updated, you can now <a [routerLink]="['/login']">login</a> with your new password.</p>
      <p class="text-danger" *ngIf="( resetPasswordForm.invalid && submitted)">Please complete all
            required fields.</p>
      <p class="text-danger" *ngIf="resetPasswordForm.controls['confirmPassword'].errors && resetPasswordForm.controls['confirmPassword'].errors.mustMatch">Passwords must match.</p>
      <ng-container *ngIf="!success">
        <p class="text-danger" *ngFor="let err of errorMessages">{{ err }}</p>
      </ng-container>

      <div class="form-group" [ngClass]="{'has-danger' :submitted &&  resetPasswordForm.controls.password.errors}">
        <label class="form-control-label" for="password">New Password</label>
        <input id="password" type="password" class="form-control" name="password" formControlName="password"
        [ngClass]="{ 'is-invalid': submitted && resetPasswordForm.controls.password.errors}" required>
      </div>

      <div class="form-group" [ngClass]="{'has-danger' :submitted &&  resetPasswordForm.controls.confirmPassword.errors}">
        <label class="form-control-label" for="confirmPassword">Confirm Password</label>
        <input id="confirmPassword" type="password" class="form-control" name="confirmPassword" formControlName="confirmPassword"
        [ngClass]="{ 'is-invalid': (submitted && resetPasswordForm.controls.confirmPassword.errors) ||
                    resetPasswordForm.controls['confirmPassword'].errors && resetPasswordForm.controls['confirmPassword'].error.mustMatch}" required>
      </div>
    </div>

    <div class="card-footer">
      <button type="submit" class="btn btn-primary" >Reset Password</button>
      <small class="text-muted">&nbsp;&nbsp;<a [routerLink]="['/login']">Back to Login</a></small>
    </div>
  </form>
</section>```

Вот код компонента 

``` private createForm() {
    this.resetPasswordForm = this.fb.group({
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    }, {
        validator: MustMatch('password', 'confirmPassword'), updateOn: 'blur' //  verify that passwords match
      });
   }```

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

1 Ответ

0 голосов
/ 11 июля 2019

Кажется, что приведенный выше код работает, Не знаю, почему у меня не все работает правильно, но после многих изменений и возврата назад, похоже, теперь работает

...