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
}
);
}

Không có nhận xét nào:

StaticImage

  import React , { useEffect , useRef } from "react" import { StaticImage } from "gatsby-plugin-image" impor...