使用 Angular 的密码确认表

Question

I am trying to write a form that involves the logic of confirming the new password value in a confirm password field. I am almost positive it is something to do with how my logic is rendered in the custom validator itself: password.validators.ts. Without giving the solution up is there something that my logic in the validation function is missing? I have attached my template, customer validator file and component. I would like the confirm password field to throw an error that is stated in my template when my custom validation renders true, this condition would be that the new password field does not match the confirm password field. When I go to enter values in the field nothing shows up.

<form [formGroup]="form">
    <div class="form-group">
      <label for="oldPassword">Old Password</label>
      <input 
        formControlName="oldPassword" 
        type="password" 
        class="form-control" 
        id="oldPassword" 
        placeholder="Enter old password">
      <div 
        *ngIf="oldPassword.touched && oldPassword.invalid" 
        class="alert alert-danger"> 
            <div *ngIf="oldPassword.errors.required">Old password is required</div>
            <div *ngIf="oldPassword.errors.cannotContainOldPassword">Old password is not valid</div>
      </div>
    </div>
    <div class="form-group">
      <label for="newPassword">New Password</label>
      <input 
            formControlName="newPassword" 
            type="text" 
            class="form-control" 
            id="newPassword" 
            placeholder="Enter new password">
        <div 
            *ngIf="newPassword.touched && newPassword.invalid" 
            class="alert alert-danger"> 
                <div *ngIf="newPassword.errors.required">New password is required</div>
      </div>
    </div>
    <div class="form-group">
        <label for="confirmPassword">Confirm Password</label>
        <input 
            formControlName="confirmPassword" 
            type="text" 
            class="form-control" 
            id="confirmPassword" 
            placeholder="Confirm new Password">
        <div 
            *ngIf="confirmPassword.touched && confirmPassword.invalid" 
            class="alert alert-danger"> 
                <div *ngIf="confirmPassword.errors.required">Confirm password is required</div>
                <div *ngIf="confirmPassword.errors.confirmNewPassword">Passwords must match</div>
        </div>    
      </div>
    <button type="submit" class="btn btn-primary">Change Password</button>
  </form>

import { AbstractControl, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';

export class PasswordValidators{

    //Make sure old password is correct
    static cannotContainOldPassword(control: AbstractControl) : Promise<ValidationErrors> | null {
        return new Promise((resolve, reject) => {
            setTimeout(()=>{
                if(control.value != "1234"){
                    resolve({cannotContainOldPassword: true});
                }else{
                    resolve(null);
                }
            });
        });
    }

    //Make sure passwords match
    static confirmNewPassword(control: AbstractControl): ValidationErrors | null{
        let newPass = control.get('newPassword');
        let confirmPass = control.get('confirmPassword');
        if(newPass === confirmPass){
            return null;
            //return { confirmNewPassword: true };
        }else{
            return { confirmNewPassword: true };
        }
    }
}

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { PasswordValidators } from './password.validators';

@Component({
  selector: 'password-form-change',
  templateUrl: './password-form-change.component.html',
  styleUrls: ['./password-form-change.component.css']
})
export class PasswordFormChangeComponent {

  form = new FormGroup({
    oldPassword: new FormControl('', Validators.required, PasswordValidators.cannotContainOldPassword),
    newPassword: new FormControl('', Validators.required),
    confirmPassword: new FormControl('', [
      Validators.required, 
      PasswordValidators.confirmNewPassword
    ])
  })

  get oldPassword(){
    return this.form.get('oldPassword');
  }

  get newPassword(){
    return this.form.get('newPassword');
  }

  get confirmPassword(){
    return this.form.get('confirmPassword');
  }
  

}

Answer 1

The problem

The problem is that you are applying the validator to the FormControl itself but inside the Validator, you try to access its children (which a Control does not have).

form = new FormGroup({
  oldPassword: new FormControl(''),
  newPassword: new FormControl(''),
  // Here you apply the Validator to your control
  confirmPassword: new FormControl('', [PasswordValidators.confirmNewPassword])
})

static confirmNewPassword(control: AbstractControl): ValidationErrors | null{
  // Your control does not have children "newPassword" and "confirmPassword"
  let newPass = control.get('newPassword'); 
  let confirmPass = control.get('confirmPassword');
  if(newPass === confirmPass) { // You are comparing FormControls instead of their values 
    return null;
  } else {
    return { confirmNewPassword: true };
  }
}

The solution

The simpliest solution would be to move the validator to the form group instead. This might also be the preferred solution, since your validator will then be run when either "newPassword" or "confirmPassword" change.

First, fix your validator to check the values instead of comparing the Controls themselves:

static confirmNewPassword(control: AbstractControl): ValidationErrors | null{
  let newPass = control.get('newPassword').value; // add .value
  let confirmPass = control.get('confirmPassword').value; // add .value
  return newPass === confirmPass ? null : {confirmNewPassword: true };
}

Then apply the validator to the whole form(group):

form = new FormGroup({
  oldPassword: new FormControl(''),
  newPassword: new FormControl(''),
  // Here you apply the Validator to your control
  confirmPassword: new FormControl('')
}, {validators: PasswordValidators.confirmNewPassword}) // Add the validator to the group instead of your control

Finally, adjust your template to check for the error on the form(group) instead of your control:

<div class="form-group">
  <label for="confirmPassword">Confirm Password</label>
  <input 
    formControlName="confirmPassword" 
    type="text" 
    class="form-control" 
    id="confirmPassword" 
    placeholder="Confirm new Password">
  <div 
    *ngIf="confirmPassword.touched && confirmPassword.invalid" 
    class="alert alert-danger"
  > 
    <div *ngIf="confirmPassword.errors?.required">Confirm password is required</div>
    <!--                              ^                    -->
    <!-- Access the errors object by using ?, since errors is null when no error is present -->
    <div *ngIf="form.errors?.confirmNewPassword">Passwords must match</div>
    <!--        ^^^^        -->
    <!-- Check for errors on form here, instead of the control -->
  </div>    
</div>

Here a Stackblitz with a minimal example on this.

Answer 2

The issue was in the ngIf directive within my template. The problem was that as soon as I typed something into the Confirm Password field, the *ngIf="confirmPassword.touched && confirmPassword.invalid" would render to true hence both the errors under that parent div would go away. So the solution was to take insert another div for the password validation underneath. The "?" operator must be included or else it will throw "ERROR TypeError: Cannot read property 'confirmNewPassword' of null".

<form [formGroup]="form">
    <div class="form-group">
      <label for="oldPassword">Old Password</label>
      <input 
        formControlName="oldPassword" 
        type="password" 
        class="form-control" 
        id="oldPassword" 
        placeholder="Enter old password">
      <div 
        *ngIf="oldPassword.touched && oldPassword.invalid" 
        class="alert alert-danger"> 
            <div *ngIf="oldPassword.errors.required">Old password is required</div>
            <div *ngIf="oldPassword.errors.cannotContainOldPassword">Old password is not valid</div>
      </div>
    </div>
    <div class="form-group">
      <label for="newPassword">New Password</label>
      <input 
            formControlName="newPassword" 
            type="text" 
            class="form-control" 
            id="newPassword" 
            placeholder="Enter new password">
        <div 
            *ngIf="newPassword.touched && newPassword.invalid" 
            class="alert alert-danger"> 
                <div *ngIf="newPassword.errors.required">New password is required</div>
      </div>
    </div>
    <div class="form-group">
        <label for="confirmPassword">Confirm Password</label>
        <input 
            formControlName="confirmPassword" 
            type="text" 
            class="form-control" 
            id="confirmPassword" 
            placeholder="Confirm new Password">
        <div 
            *ngIf="confirmPassword.touched && confirmPassword.invalid" 
            class="alert alert-danger"> 
                <div *ngIf="confirmPassword.errors.required">Confirm password is required</div>
        </div> 
        <div 
          *ngIf="confirmPassword.valid && form.invalid && form.errors?.confirmNewPassword" 
          class="alert alert-danger">
          Passwords should match
        </div>   
      </div>
    <button type="submit" class="btn btn-primary">Change Password</button>
  </form>