Welcome folks today in this blog post we will be using the ngx-strength-meter
library to validate
material input password strength meter in typescript in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new sampleproject
cd sampleproject
npm i ngx-strength-meter
And after that you will see the below directory
structure of the angular app as shown below
And now we need to go to app.module.ts
file and import the below modules
and add it inside the imports
array as shown below
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { AppComponent } from "./app.component"; import { FormsModule,ReactiveFormsModule } from "@angular/forms"; import {BrowserAnimationsModule} from '@angular/platform-browser/animations' import {StrengthMeterModule} from 'ngx-strength-meter' import {MatInputModule} from '@angular/material/input' import {MatCardModule} from '@angular/material/card' @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, FormsModule, ReactiveFormsModule, BrowserAnimationsModule, StrengthMeterModule, MatCardModule, MatInputModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} |
And now we need to copy paste the below html
code inside the app.component.html
file as shown below
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="flex-container"> <div class="header flex-item"> <h2 style="text-align:center"> NGX Strength Meter</h2> </div> <mat-card> <mat-card-content> <form [formGroup]="form" name="form"> <mat-form-field style="width:100%"> <input type="password" formControlName="password" matInput name="password" placeholder="Enter password"/> </mat-form-field> <strength-meter (measure)="onStrengthChange($event)" [value]="form.value.password"> </strength-meter> </form> </mat-card-content> </mat-card> </div> |
As you can see in the above html. code we have the material password
input field where the user can write the password and below that we have the password validator strength
meter checker where we have the animation
telling whether the password is strong or not. For that we are using the strength-meter
directive and inside that we are passing the value of the password
and also we are passing the measure
event function.
And now we need to go to app.component.ts
file and copy paste the below code
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import {Component, OnInit} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { form!: FormGroup constructor(private fb:FormBuilder){} ngOnInit():void{ this.form = this.fb.group({ password:['',Validators.required] }) } onStrengthChange(score: any) { console.log('new score', score); } } |
As you can see we are importing the FormGroup
class and also we are the passing the reference
of the FormBuilder class inside the constructor. And inside the ngOnInit
lifecycle method we are initializing the form
to the material
strength meter checker and here we are attaching the validator
property. And also we have defined the onStrengthChange()
function.