Angular CustomValidators: Password example

Source: https://codinglatte.com/posts/angular/cool-password-validation-angular/

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

export class CustomValidators {

static patternValidator(regex: RegExp, error: ValidationErrors): ValidatorFn {

return (control: AbstractControl): { [key: string]: any } => {

if (!control.value) {

// if control is empty return no error

return null;

}

// test the value of the control against the regexp supplied

const valid = regex.test(control.value);

// if true, return no error (no error), else return error passed in the second parameter

return valid ? null : error;

};

}

static passwordMatchValidator(control: AbstractControl) {

const password: string = control.get('newPassword').value; // get password from our password form control

const confirmPassword: string = control.get('retypePassword').value; // get password from our confirmPassword form control

// compare is the password math

if (password !== confirmPassword) {

// if they don't match, set an error in our confirmPassword form control

control.get('retypePassword').setErrors({ NoPassswordMatch: true });

}

}

}

public static getPasswordValidators() {

return Validators.compose([

Validators.required,

// check whether the entered password has a number

CustomValidators.patternValidator(/\d/, {

hasNumber: true

}),

// check whether the entered password has upper case letter

CustomValidators.patternValidator(/[A-Z]/, {

hasCapitalCase: true

}),

// check whether the entered password has a lower case letter

CustomValidators.patternValidator(/[a-z]/, {

hasSmallCase: true

}),

// check whether the entered password has a special character

CustomValidators.patternValidator(

/[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,

{

hasSpecialCharacters: true

}

),

Validators.minLength(8),

Validators.maxLength(50)

])

}

createPasswordForm(): FormGroup {

return this._fb.group(

{

currentPassword: [

null,

Validators.compose([Validators.required])

],

newPassword: [

null,

Utils.getPasswordValidators()

],

retypePassword: [null, Validators.compose([Validators.required])]

},

{

// check whether our password and confirm password match

validator: CustomValidators.passwordMatchValidator

}

);

}