以角度确认密码验证

Question

我有一个带有 2 个输入字段的重置密码表单：

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>

Answer 1

我对您的代码做了一些更改，请检查

.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.log(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);
      }
    };
  }
}

超文本标记语言

<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

Answer 2

阿尼鲁德·塔科尔（Aniruddh Thakor）的回答似乎大部分都有效。然而，由于我的项目在较新的 Angular 版本上运行，我必须做出一些更改。

首先，该formBuilder.group()函数被标记为已弃用。为了解决这个问题，我必须切换validator到validators, 才能使用未弃用的函数。

然后我必须调整 Validator 函数内的 return 语句以满足类型ValidatorFn。该函数应该返回null（例如，当没有错误时）或ValidationError按以下方式格式化：[key: string]: any。

我的更新版本：

ngOnInit() {
    this.resetPasswordForm = this.formBuilder.group(
      {
        password: ['', Validators.required],
        confirmPassword: ['', Validators.required]
      },
      {
        validators: this.matchValidator('password', 'confirmPassword')
      }
    );
  }

  matchValidator(controlName: string, matchingControlName: string): ValidatorFn {
    return (abstractControl: AbstractControl) => {
        const control = abstractControl.get(controlName);
        const matchingControl = abstractControl.get(matchingControlName);

        if (matchingControl!.errors && !matchingControl!.errors?.['confirmedValidator']) {
            return null;
        }

        if (control!.value !== matchingControl!.value) {
          const error = { confirmedValidator: 'Passwords do not match.' };
          matchingControl!.setErrors(error);
          return error;
        } else {
          matchingControl!.setErrors(null);
          return null;
        }
    }
  }