Подтвердите пароль угловой материал

Question

Я работаю, чтобы аутентифицировать пользователя с помощью Angular Material.В настоящее время я пытаюсь отобразить правильную ошибку mat, когда пароль подтверждения не соответствует первому введенному pw.

Вот мой HTML:

 <mat-form-field hintLabel="Minimum 8 Characters" class="">
                            <mat-label>Password</mat-label>
                            <input 
                            matInput 
                            #input 
                            type="password"
                            formControlName="password">
                            <mat-hint align="end">{{input.value?.length || 0}}/8</mat-hint>
                        </mat-form-field>

                        <mat-form-field>
                            <mat-label>Confirm</mat-label>
                            <input 
                            matInput
                            required  
                            type="password"
                            #confirm
                            formControlName="confirmPassword">
                            <mat-error *ngIf="form.get('confirmPassword').invalid || confirmPasswordMismatch">Password does not match</mat-error>
                            </mat-form-field>

Ошибка отображается, как только пользователь сфокусировался на подтверждении пароля, и не фокусируется, ничего не вводя.Как только пользователь вводит что-либо, ошибка исчезает, даже если подтверждение не совпадает с паролем.

Вот мой файл TS:

public get confirmPasswordMismatch() {
        return (this.form.get('password').dirty || this.form.get('confirmPassword').dirty) && this.form.hasError('confirmedDoesNotMatch');
    }

this.form = new FormGroup({
            userName: new FormControl(null, [Validators.required]),
            fullName: new FormControl(null, [Validators.required]),
            email: new FormControl(null, [Validators.required, Validators.pattern(this.EMAIL_REGEX)]),
            password: new FormControl(null),
            confirmPassword: new FormControl(null, ),
        }, (form: FormGroup) => passwordValidator.validate(form));

Желаемый эффект состоит в том, что ошибка показываеткогда пользователь ввел текст во ввод pw, когда подтверждение pw пусто и показать ошибку, когда оба текста, но подтверждение не совпадает с pw.

Answer 1

Я решил это так:

Шаблон:

  <mat-form-field>
    <input matInput type="password" placeholder="Password" formControlName="password" (input)="onPasswordInput()">
    <mat-error *ngIf="password.hasError('required')">Password is required</mat-error>
    <mat-error *ngIf="password.hasError('minlength')">Password must have at least {{minPw}} characters</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput type="password" placeholder="Confirm password" formControlName="password2" (input)="onPasswordInput()">
    <mat-error *ngIf="password2.hasError('required')">Please confirm your password</mat-error>
    <mat-error *ngIf="password2.invalid && !password2.hasError('required')">Passwords don't match</mat-error>
  </mat-form-field>

Компонент:

export class SignUpFormComponent implements OnInit {

  minPw = 8;
  formGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      password: ['', [Validators.required, Validators.minLength(this.minPw)]],
      password2: ['', [Validators.required]]
    }, {validator: passwordMatchValidator});
  }

  /* Shorthands for form controls (used from within template) */
  get password() { return this.formGroup.get('password'); }
  get password2() { return this.formGroup.get('password2'); }

  /* Called on each input in either password field */
  onPasswordInput() {
    if (this.formGroup.hasError('passwordMismatch'))
      this.password2.setErrors([{'passwordMismatch': true}]);
    else
      this.password2.setErrors(null);
  }
}

Валидатор:

export const passwordMatchValidator: ValidatorFn = (formGroup: FormGroup): ValidationErrors | null => {
  if (formGroup.get('password').value === formGroup.get('password2').value)
    return null;
  else
    return {passwordMismatch: true};
};

Примечания:

• Благодаря тому, что onPasswordInput() вызывается из любого поля пароля, редактируется первое поле пароля(и, таким образом, делает недействительным подтверждение пароля), также приводит к отображению ошибки несоответствия в поле подтверждения пароля.
• Проверка *ngIf="password2.invalid && !password2.hasError('required')" для поля подтверждения пароля гарантирует, что никогда не появятся оба сообщения об ошибке («несоответствие» и «Обязательно ") отображаются одновременно.

Answer 2

вы по существу проверяете, как 2 поля формы взаимодействуют друг с другом (поля «пароль» и «подтвердить пароль»).Это известно как « проверка по полям »

, что означает, что ваш пользовательский валидатор не может быть назначен только 1 полю.Пользовательский валидатор должен быть назначен общему родителю, форме.

Вот официальная документально подтвержденная лучшая практика для проверки того, как 2 поля в форме взаимодействуют друг с другом

https://angular.io/guide/form-validation#cross-field-validation

этот фрагмент кода работал для меня

template:

<form method="post" [formGroup]="newPasswordForm">
  <input type="password" formControlName="newPassword" />
  <input type="password" formControlName="newPasswordConfirm" />
  <div class="err-msg" *ngIf="newPasswordForm.errors?.passwordMismatch && (newPasswordForm.touched || newPasswordForm.dirty)">
        confirm-password does not match password
      </div>
</form>

component.ts:

export class Component implements OnInit {
    this.newPasswordForm = new FormGroup({
      'newPassword': new FormControl('', [
        Validators.required,
      ]),
      'newPasswordConfirm': new FormControl('', [
        Validators.required
      ])
    }, { validators: passwordMatchValidator });
}

export const passwordMatchValidator: ValidatorFn = (formGroup: FormGroup): ValidationErrors | null => {
  return formGroup.get('newPassword').value === formGroup.get('newPasswordConfirm').value ?
    null : { 'passwordMismatch': true };
}

Обратите внимание, что для passwordMatchValidator этонаходится за пределами класса компонента.Это НЕ внутри класса

Answer 3

Судя по вашему коду, похоже, что вы не добавили проверку для поля verifyPassword: confirmPassword: new FormControl(null, ), поэтому единственная проверка происходит через атрибут required.Кроме того, ошибка mat будет отображаться только в поле формы, если элемент управления формы недействителен.Это означает, что вы не можете заставить ошибку отображаться просто с помощью ngIf.Поскольку у вас есть только required проверка для этого поля, имеет смысл, что у вас есть ошибка только тогда, когда поле пусто.Чтобы решить эту проблему, вам нужно создать валидатор для проверки несоответствия и добавить его в элемент управления формы verifyPassword.В качестве альтернативы вы можете вручную добавить ошибки в элемент управления формы, используя setErrors(), когда поле изменяется, добавив прослушиватель ввода - например (это только из памяти - может потребоваться исправление):

<mat-form-field>
    <mat-label>Confirm</mat-label>
    <input matInput required type="password" #confirm formControlName="confirmPassword"
        (input)="onInput($event.target.value)">
    <mat-error *ngIf="form.get('confirmPassword').invalid>
        Password does not match
    </mat-error>
</mat-form-field>


onInput(value) {
    if (this.form.hasError('confirmedDoesNotMatch')) { // or some other test of the value
        this.form.get('confirmPassword').setErrors([{'confirmedDoesNotMatch': true}]);
    } else {
        this.form.get('confirmPassword').setErrors(null);
    }
}