Hiển thị các bài đăng có nhãn password validator. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn password validator. Hiển thị tất cả bài đăng

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

anti-pattern là gì

  Trong công nghệ và lập trình, Anti-pattern (mẫu phản diện) là những giải pháp bề ngoài có vẻ hiệu quả để giải quyết một vấn đề phổ biến, ...