在 angular 中确认密码验证

Question

我有一个带有 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);
      }
    };
  }
}

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

Answer 2

您可以直接向您的 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 将在每次密码和检查之间的值不匹配时自动检查错误：

See Stackblitz

在 angular 中确认密码验证

Confirm password validation in angular

forms

reset-password

angular

angular-reactive-forms

形成群组

正在验证表单组本身

结合它们