Implementing Confirm Password Validation with Angular Material Components in Angular 6

Introduction

In modern web applications, user registration and password modification functionalities are essential components, where password confirmation validation plays a crucial role in ensuring data accuracy. The Angular framework combined with the Material Design component library offers powerful form validation capabilities, but implementing password confirmation validation requires specific configurations and custom logic.

Problem Analysis

When implementing password confirmation validation in Angular applications, developers often face the following challenges: how to compare the values of two password fields in real-time, how to display error messages when the confirm password field doesn't match, and how to integrate with Material component's error state management.

The traditional approach using separate FormControls cannot meet cross-field validation requirements, necessitating a FormGroup-level validation strategy.

Core Implementation Solution

Custom Password Validator

First, create a custom validator function to compare the password and confirm password field values:

checkPasswords: ValidatorFn = (group: AbstractControl): ValidationErrors | null => {
  let pass = group.get('password').value;
  let confirmPass = group.get('confirmPassword').value;
  return pass === confirmPass ? null : { notSame: true };
}

This validator receives a FormGroup as parameter, compares the values of password and confirmPassword fields, returns null if they match, otherwise returns a validation error object.

FormGroup Configuration

Use FormBuilder to create a form group containing password fields and apply the custom validator:

this.myForm = this.fb.group({
  password: ['', [Validators.required]],
  confirmPassword: ['']
}, { validators: this.checkPasswords })

Note that the required validator is removed from the confirm password field since form-level validation already ensures data integrity.

Custom Error State Matcher

Since mat-error displays only when FormControl is invalid by default, a custom ErrorStateMatcher is needed to extend error display logic:

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const invalidCtrl = !!(control?.invalid && control?.parent?.dirty);
    const invalidParent = !!(control?.parent?.invalid && control?.parent?.dirty);
    return invalidCtrl || invalidParent;
  }
}

This matcher returns true when either the control itself is invalid or the parent form group is invalid, ensuring error messages display when passwords don't match.

Component Integration

Instantiate the error state matcher in the component:

matcher = new MyErrorStateMatcher();

Template Implementation

The final HTML template integrates all functionalities:

<form [formGroup]="myForm">
  <mat-form-field>
    <input matInput placeholder="New password" formControlName="password" required>
    <mat-error *ngIf="myForm.hasError('required', 'password')">
      Please enter your new password
    </mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Confirm password" formControlName="confirmPassword" [errorStateMatcher]="matcher">
    <mat-error *ngIf="myForm.hasError('notSame')">
      Passwords do not match
    </mat-error>  
  </mat-form-field>
</form>

Implementation Details Analysis

Validation Timing Control

By checking the dirty state in ErrorStateMatcher, error messages are displayed only after user interaction, avoiding initial state errors and providing better user experience.

Error Message Management

The password field maintains independent required validation error display, while the confirm password field specifically shows matching errors, ensuring clear separation of responsibilities.

Material Component Integration

Fully utilizes Material component's mat-error and errorStateMatcher features to achieve native Material Design style error prompts.

Alternative Solutions Comparison

Pattern Validation Method

Another implementation approach uses pattern validator, setting the password field value as the pattern for confirm password field:

<input type="password" [(ngModel)]="userdata.confirmpassword" 
       pattern="{{ password.value }}">

This method is simple to implement but lacks flexibility and has limited error handling capabilities.

Independent Validator Class

Creating independent validator classes provides better code organization and reusability:

export class CustomValidators {
  static match(controlName: string, matchControlName: string): ValidatorFn {
    return (controls: AbstractControl) => {
      const control = controls.get(controlName);
      const matchControl = controls.get(matchControlName);
      
      if (!matchControl?.errors && control?.value !== matchControl?.value) {
        matchControl?.setErrors({
          matching: {
            actualValue: matchControl?.value,
            requiredValue: control?.value
          }
        });
        return { matching: true };
      }
      return null;
    };
  }
}

Best Practice Recommendations

User Experience Optimization

It's recommended to revalidate the confirm password field when the password field value changes to ensure immediate feedback:

this.myForm.controls.password.valueChanges.subscribe(() => {
  this.myForm.controls.confirmPassword.updateValueAndValidity();
});

Security Considerations

Beyond basic matching validation, consider password strength validation and prevention of common weak passwords for enhanced security.

Accessibility

Ensure error messages are properly associated with corresponding fields through ARIA attributes, supporting assistive technologies like screen readers.

Conclusion

Through FormGroup-level custom validators combined with ErrorStateMatcher, password confirmation validation with Angular Material components can be elegantly implemented. This approach maintains code clarity while providing excellent user experience. Developers can choose appropriate implementation solutions based on specific requirements and extend more validation logic on this foundation.