The password validator is a pop-up window that appears when you start typing in input box. Here you can configure the password acceptance criteria, once your enter characters fullfil the requirement you will get a success message.
npm install ng-password-validatorNgModule:
ts
import { NgPasswordValidatorModule } from 'ng-password-validator';
@NgModule({
imports: [ NgPasswordValidatorModule ]
})
`
Usage
Options can be set in the directive tag, so they have the highest priority.
`html
NgPasswordValidator>
`
You may pass as an object:
`html
[NgPasswordValidator]="options">
`
Password type as 'range':
`ts
options = {
'placement': 'top',
'rules': {
'password': {
'type': "range",
'min': 6,
'max': 10,
// No need to pass length
}
},
'shadow': false,
'offset': 15,
}
`
Password type as 'number':
`ts
options = {
'placement': 'top',
'rules': {
'password': {
'type': "number",
'length': 8,
// No need to pass min and max
}
},
'shadow': false,
'offset': 15,
}
`
Template( Default value is popup ):
`html
[NgPasswordValidator]="options">
`
Template as 'inline':
`ts
options = {
'template': 'inline',
'theme': 'pro'
}
`
Template as 'popup':
`ts
options = {
'template': 'popup',
'theme': 'pro'
}
`
Theming( Default value is pro ):
`html
[NgPasswordValidator]="options">
`
Theme as 'basic':
`ts
options = {
'placement': 'top',
'theme': 'basic'
}
`
Theme as 'pro':
`ts
options = {
'placement': 'top',
'theme': 'pro'
}
`
You can also change Popup header and success message:
`html
[NgPasswordValidator]="options">
`
`ts
options = {
'heading': 'Password Requirement',
'successMessage': 'Wow! Password is Strong.'
}
`
After closing the popup window, you will get one output for password validity (true/false):
`html
NgPasswordValidator (valid)="isValid($event)">
`
`ts
isValid(event: boolean) {
this.isPasswordValid = event;
}
`
Custom class configuration
In Component HTML file
`html
[NgPasswordValidator]="options">
`
In Component TS file
`ts
options = {
'custom-class': 'custom-class',
}
`
In Component SCSS file
`CSS
::ng-deep {
.custom-class {
.popup-window {
.heading {
color: red !important;
font-family: cursive;
}
}
}
}
`
Set default values
In app.module.ts export the default options like below:
`ts
import { NgPasswordValidatorModule, NgPasswordValidatorOptions } from "ng-password-validator";
export const MyDefaultOptions: NgPasswordValidatorOptions = {
placement: "right",
rules: {
'password': {
'type': "range",
'min': 6,
'max': 10,
},
"include-symbol": true,
"include-number": false,
"include-lowercase-characters": true,
"include-uppercase-characters": false,
}
};
`
And pass your parameters when importing the module:
`ts
@NgModule({
imports: [
NgPasswordValidatorModule.forRoot(MyDefaultOptions as NgPasswordValidatorOptions)
]
})
``