Подтвердите проверку пароля в angular

У меня есть форма сброса пароля с двумя полями ввода:

  1. Новый пароль
  2. Новый пароль (подтверждение)

Мне пришлось создать проверку, где «Новый пароль (подтверждение) должен соответствовать «Новому паролю», и я сделал это. Когда вы вводите неправильный пароль в поле «Новый пароль (подтверждение)», это дает ошибку и не позволит вам отправить форму до тех пор, пока он не совпадет с паролем в поле «Новый пароль». Но если я вернусь и изменю поле «Новый пароль», «Поле нового пароля (подтверждения) покажет его так, как будто они все еще совпадают, даже если они больше не ... Так что мой вопрос: как я могу решить эту проблему?

Любой совет приветствуется

ts-файл

import { AbstractControl, FormBuilder, FormControl, Validators } from '@angular/forms';
import { AppConfig } from 'src/app/_common/configs/app.config';
import { Component } from '@angular/core';

@Component({
  selector: 'app-reset-password',
  templateUrl: './reset-password.component.html',
  styleUrls: ['./reset-password.component.scss'],
})
export class ResetPasswordComponent {
  passwordsMatching = false;
  isConfirmPasswordDirty = false;
  confirmPasswordClass = 'form-control';
  appConfig = AppConfig;
  newPassword = new FormControl(null, [
    (c: AbstractControl) => Validators.required(c),
    Validators.pattern('^((?!.*[s])(?=.*[A-Z])(?=.*d).{8,99})'),
  ]);
  confirmPassword = new FormControl(null, [
    (c: AbstractControl) => Validators.required(c),
    Validators.pattern('^((?!.*[s])(?=.*[A-Z])(?=.*d).{8,99})'),
  ]);

  resetPasswordForm = this.formBuilder.group({
    newPassword: this.newPassword,
    confirmPassword: this.confirmPassword,
  });

  constructor(private formBuilder: FormBuilder) {}

  onSubmit(): void {
    if (!this.resetPasswordForm?.valid) {
      return;
    }
  }

  checkPasswords(pw: string, cpw: string) {
    this.isConfirmPasswordDirty = true;
    if (pw == cpw) {
      this.passwordsMatching = true;
      this.confirmPasswordClass = 'form-control is-valid';
    } else {
      this.passwordsMatching = false;
      this.confirmPasswordClass = 'form-control is-invalid';
    }
  }
}

**
HTML**

<section class = "h-100">
  <div class = "container h-100"> 
    <div class = "card reset-password-form-card">
      <div class = "card-body p-5">
        <h4 class = "card-title fw-bold mb-4">Reset password</h4>
        <form class = "form" [formGroup] = "resetPasswordForm" (ngSubmit) = "onSubmit()">
          <div class = "mb-3">
            <label for = "newPassword">New password: </label>
            <input id = "newPassword" type = "password" 
            class = "form-control" formControlName = "newPassword" #pw>
            <div *ngIf = "newPassword.invalid && (newPassword.dirty || newPassword.touched)"
            class = "form-text text-danger">
            <div *ngIf = "newPassword.errors?.['required']">
              Field is required
            </div>
            <div *ngIf = "newPassword.errors?.['pattern']">
              Password must contain at least one number, one uppercase and a lowercase letter 
              and at least 8 characters<br>Password cannot contain whitespace
            </div>
          </div>
        </div>
        <div class = "mb-3">
          <label for = "confirmPassword">New password (confirmation):</label>
          <input id = "confirmPassword" type = "password" class = "form-control"
          [ngClass]='confirmPasswordClass' formControlName = "confirmPassword"
          #cpw (keyup)='checkPasswords(pw.value, cpw.value)'>
          <div *ngIf = "confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)"
          class = "form-text text-danger">
        <div *ngIf = "confirmPassword.errors?.['required']">
          Field is required        
        </div>
        <div *ngIf = "confirmPassword.errors?.['pattern']">
          Password must contain at least one number, one uppercase and a lowercase letter 
          and at least 8 characters<br>Password cannot contain whitespace
        </div>
        <div *ngIf='!passwordsMatching && isConfirmPasswordDirty'>
          Passwords did not match
      </div>
      </div>
    </div>
    <div class = "d-flex align-items-center">
      <button [disabled] = "!resetPasswordForm.valid" type = "submit" class = "btn btn-dark col-5 mx-auto">
        Reset password
      </button>
      <button type = "button" class = "btn btn-light col-5 mx-auto" appBackButton>Back</button>
    </div>
   </form>
      </div>
    </div> 
  </div>
</section>
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
34
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я внес некоторые изменения в ваш код, поэтому проверьте

ts-файл

export class AppComponent {
  name = 'Angular ' + VERSION.major;
  passwordsMatching = false;
  isConfirmPasswordDirty = false;
  confirmPasswordClass = 'form-control';
  newPassword = new FormControl(null, [
    (c: AbstractControl) => Validators.required(c),
    Validators.pattern(
      /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@$!%*#?&^_-]).{8,}/
    ),
  ]);
  confirmPassword = new FormControl(null, [
    (c: AbstractControl) => Validators.required(c),
    Validators.pattern(
      /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@$!%*#?&^_-]).{8,}/
    ),
  ]);

  resetPasswordForm = this.formBuilder.group(
    {
      newPassword: this.newPassword,
      confirmPassword: this.confirmPassword,
    },
    {
      validator: this.ConfirmedValidator('newPassword', 'confirmPassword'),
    }
  );

  constructor(private formBuilder: FormBuilder) {}

  onSubmit(): void {
    console.info(this.resetPasswordForm);
    if (!this.resetPasswordForm?.valid) {
      return;
    }
  }

  ConfirmedValidator(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
      const control = formGroup.controls[controlName];
      const matchingControl = formGroup.controls[matchingControlName];
      if (
        matchingControl.errors &&
        !matchingControl.errors.confirmedValidator
      ) {
        return;
      }
      if (control.value !== matchingControl.value) {
        matchingControl.setErrors({ confirmedValidator: true });
      } else {
        matchingControl.setErrors(null);
      }
    };
  }
}

HTML

<section class = "h-100">
  <div class = "container h-100">
    <div class = "card reset-password-form-card">
      <div class = "card-body p-5">
        <h4 class = "card-title fw-bold mb-4">Reset password</h4>
        <form
          class = "form"
          [formGroup] = "resetPasswordForm"
          (ngSubmit) = "onSubmit()"
        >
          <div class = "mb-3">
            <label for = "newPassword">New password: </label>
            <input
              id = "newPassword"
              type = "password"
              class = "form-control"
              formControlName = "newPassword"
              #pw
            />
            <div
              *ngIf = "
                newPassword.invalid &&
                (newPassword.dirty || newPassword.touched)
              "
              class = "form-text text-danger"
            >
              <div *ngIf = "newPassword.errors?.['required']">
                Field is required
              </div>
              <div *ngIf = "newPassword.errors?.['pattern']">
                Password must contain at least one number, one uppercase and a
                lowercase letter and at least 8 characters<br />Password cannot
                contain whitespace
              </div>
            </div>
          </div>
          <div class = "mb-3">
            <label for = "confirmPassword">New password (confirmation):</label>
            <input
              id = "confirmPassword"
              type = "password"
              class = "form-control"
              [ngClass] = "confirmPasswordClass"
              formControlName = "confirmPassword"
              #cpw
            />
            <div
              *ngIf = "
                confirmPassword.invalid &&
                (confirmPassword.dirty || confirmPassword.touched)
              "
              class = "form-text text-danger"
            >
              <div *ngIf = "confirmPassword.errors?.['required']">
                Field is required
              </div>
              <div *ngIf = "confirmPassword.errors?.['pattern']">
                Password must contain at least one number, one uppercase and a
                lowercase letter and at least 8 characters<br />Password cannot
                contain whitespace
              </div>
              <div *ngIf = "confirmPassword.errors?.['confirmedValidator']">
                Passwords did not match
              </div>
            </div>
          </div>
          <div class = "d-flex align-items-center">
            <button
              type = "submit"
              [disabled] = "resetPasswordForm.invalid"
              class = "btn btn-dark col-5 mx-auto"
            >
              Reset password
            </button>
            <button
              type = "button"
              class = "btn btn-light col-5 mx-auto"
              appBackButton
            >
              Back
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

И вот его рабочая демонстрация: - https://stackblitz.com/edit/angular-ivy-pjdyva?file=src%2Fapp%2Fapp.component.ts

Вы можете добавить валидатор непосредственно к FormGroup, который сравнивает значение двух ваших элементов управления формы.

Группа форм

Сначала мы создаем группу форм, которая обрабатывает проверку каждого отдельного поля ввода:

passwordForm: FormGroup;

constructor(fb: FormBuilder) {
  this.passwordForm = fb.group({
    // any validators you may need to check the formatting of your password
    password: fb.control('', [Validators.required]) 
    check: fb.control('', [Validators.required])
  });
}

Проверка самой группы форм

Теперь нам просто нужно проверить, совпадают ли наши два элемента управления, это можно сделать, добавив еще один валидатор непосредственно в наш FormGroup.

Я сделал функцию, которая создает новый валидатор, сравнивая значения каждого:

function createCompareValidator(controlOne: AbstractControl, controlTwo: AbstractControl) {
    return () => {
    if (control.value !== controlTwo.value)
      return { match_error: 'Value does not match' };
    return null;
  };

}

комбинируя их

В нашем конструкторе после создания вашего FormGroup мы теперь добавляем новый валидатор к самому FormGroup.

// continued inside constructor()
this.passwordForm.addValidator(
 createCompareValidator(
   this.passwordForm.get('password'),
   this.passwordForm.get('check')
 )
);

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

См. Stackblitz

Другие вопросы по теме