Password validator Components for Angular applications

This package contains a UI component for password validator built on top of Angular Material library and Component Development Kit.

Angular version compatibility

| versions | Compatible Angular versions | |---|---| | 0.0.4 | latest |

Setup

Prerequisite:

ng add @angular/material
npm i bootstrap

Install the package in your Angular project by using one of the commands below, according to the package manager chosen.

NPM:

npm install password-validator-component

Import the NgModule from one of the sub-packages where the component is provided. For example:

MODULE :

import { PasswordValidatorModule } from 'password-validator-component';
@NgModule({
	declarations: [],
	imports: [PasswordValidatorModule]
})
export class MyModule {}

HTML :

<password-validator-component [validatorFromGroup]="formGroup"></password-validator-component>

Here a control named 'password' will automatically created inside the formGroup

TS :

export class MyComponent implements OnInit {
  formGroup!: FormGroup;

  ngOnInit(): void {
    const fb = new FormBuilder();
    this.formGroup = new FormGroup({
      username: todo
    })
  }

When you console.log(formGroup) after entering the password, 2 controls username and password will be created.

Customization

<password-validator-component
[matLabel] = '"Enter Password"'  // Default 'Password' (optional field)
[matErrorWeak] = '"you have entered a weak password"' // Defaut 'Weak password' (optional field)
[matErrorInvalid] =  '"you have entered a invalid password"' // Defaut 'Invalid password' (optional field)
[matFormFieldAppearance] = '"outline" | "legacy" | "etc"' // Default 'legacy' (optional field)
[validatorFromGroup]="formGroup" (mandatory field)
></password-validator-component>

Theming

To incorporate components' theming with Angular Material, you need to configure a custom theme, following the theming guide on the Angular Material document site. In the global style SASS partial where the Material theme is configured, add the BUI theme mixin reference to activate theming.

You may also need to include the CSS of custom font definitions for Material Icon Font into the global stylesheets.

Keywords

Angular Angular Material UI library bootstrap

Source Code

Library - https://github.com/himanshusingh2041/password-validator-component Library Consumer - https://github.com/himanshusingh2041/password-validator-component-tester Live Result - https://himanshusingh2041.github.io/password-validator-component-deployed/