Introduction

In this article, we will learn about a form with a password input field. We will then add a password strength checker. Please follow the below steps.
Password Restrictions
  1. Must be minimum 6 character
  2. Must be a at least one uppercase
  3. Must be a at least one lowercase
  4. Must be at least one special character
  5. Must be at least one number
We will validate the above rules using a Regular Expression.
Step 1
Let's create an Angular app with the following command:
Password Strength In Angular
Step 2
Open app.module.ts file and add the import of reactiveform.
  1. import { ReactiveFormsModule } from '@angular/forms';
After then add the reactiveformsmodule to imports the array.
  1. imports: [
  2. ReactiveFormsModule,
  3. ],
Step 3
We can use the template-driven form validate. Now open the app.component.ts file and add the following code.
  1. <form >
  2. <div class="form-group">
  3. <input type="password" class="form-control" autocomplete="off" placeholder="Password">
  4. </div>
  5. </form>
Step 4
We are using reactive form validation in Angular, so we need to add formgroup property and formcontrolname in the input field .
  1. <form [formGroup]="passwordform">
  2. </form>
We also add the formcontrolname in input filed.
  1. formControlName="chkpassword"
Step 5
Next, we need to open then app.componet.ts file and add the following reference file.
  1. import { FormGroup, FormBuilder, Validators } from '@angular/forms';
  • The formgroup used the state of formcontrol elements .
  • The Formbuilder has a new helper class called formbuilder.
  • The validators some set of built validators to be used.
Step 6
We need add to the construtor and ngOnInit methods.
  1. ngOnInit()
  2. {
  3. this.passwordform = this.form.group({
  4. chkpassword: ['', Validators.required],
  5. });
Step 7
Next, we can create a child component to be used for some bars and indicate the strength of the password. The bars will automatically update to different colors. Create a component for the following npm command:
Ng g c password
This command automatically adds to app.module.ts file
Step 8
We can open the passwordcheck.component.html file and add the following code:
  1. <div class="strength">
  2. <ul class="barlength">
  3. <li class="checker" [style.background-color]="length0"></li>
  4. <li class="checker" [style.background-color]="length1"></li>
  5. <li class="checker" [style.background-color]="length2"></li>
  6. <li class="checker" [style.background-color]="length3"></li>
  7. </ul>
  8. <br>
  9. <p style="font-size: 15px;">{{message}}</p>
  10. </div>
Step 9
Next, we can open the passwordcheck.component.ts to add the property file.
  1. length0: string;
  2. length1: string;
  3. length2: string;
  4. length3: string;
  5. message=''
Step 10
Go to app.component.html page add the passwordcheck child component by using the component selector.
  1. <app-password></app-password>
Step 11
Let's open the passwordcheck.component.ts file and create a input property called passwordcheck
  1. @Input() public passwordCheck: string;
Add output for strength
  1. @Output() Strength = new EventEmitter<boolean>()
Step 12
Create an array colors to be displayed the bars.
  1. private colors = ['red', 'darkorange', 'green', 'darkgreen'];
Now create a method for check the password strength. Add the following code.
  1. private static Strengths(p) {
  2. let checklen = 0;
  3. const regex = /[$-/:-?{-~!"^_@`\[\]]/g;
  5. const lowerLetters = /[a-z]+/.test(p);
  6. const upperLetters = /[A-Z]+/.test(p);
  7. const numbers = /[0-9]+/.test(p);
  8. const symbols = regex.test(p);
  10. const flags = [lowerLetters, upperLetters, numbers, symbols];
  12. let Passwordmaches = 0;
  13. for (const flag of flags) {
  14. Passwordmaches += flag === true ? 1 : 0;
  15. }
  17. checklen += 2 * p.length + ((p.length >= 10) ? 1 : 0);
  18. checklen += Passwordmaches * 10;
  20. //Check length
  21. checklen = (p.length <= 6) ? Math.min(checklen, 3) : checklen;
  24. checklen = (Passwordmaches === 1) ? Math.min(checklen, 10) : checklen;
  25. checklen = (Passwordmaches === 2) ? Math.min(checklen, 20) : checklen;
  26. checklen = (Passwordmaches === 3) ? Math.min(checklen, 30) : checklen;
  27. checklen = (Passwordmaches === 4) ? Math.min(checklen, 40) : checklen;
  29. return checklen;
  30. }
Step 13
The next step is to implement ngonchanges, so add the following code.
  1. ngOnChanges(changes: { [propName: string]: SimpleChange }): void {
  2. debugger;
  3. const password = changes.passwordCheck.currentValue;
  4. this.setBarColors(4, '#DDD');
  5. if (password) {
  6. const c = this.getColor(PasswordComponent.Strengths(password));
  7. this.setBarColors(c.idx, c.col);
  9. const pwdStrength = PasswordComponent.Strengths(password);
  11. if(pwdStrength>=30)
  12. {
  13. this.Strength.emit(true)
  14. }
  15. else
  16. {
  17. this.Strength.emit(false)
  18. }
Step 14
Inside of the if statement in the ngonchanges, add to switch statements.
  1. switch (c.idx) {
  2. case 1:
  3. this.message = 'Weak'+'(Ex:Hari@12345)';
  4. break;
  5. case 2:
  6. this.message = 'Average' +'(Ex:Hari@12345)';
  7. break;
  8. case 3:
  9. this.message = 'Good' +'(Ex:Hari@12345)';
  10. break;
  11. case 4:
  12. this.message = 'Strong';
  13. break;
  14. }
  15. } else {
  16. this.message = '';
  17. }
  18. }
  20. private getColor(s) {
  21. let idx = 0;
  22. if (s <= 10) {
  23. idx = 0;
  24. } else if (s <= 20) {
  25. idx = 1;
  26. } else if (s <= 30) {
  27. idx = 2;
  28. } else if (s <= 40) {
  29. idx = 3;
  30. } else {
  31. idx = 4;
  32. }
  33. return {
  34. idx: idx + 1,
  35. col: this.colors[idx]
  36. };
  37. }
  39. private setBarColors(count, col) {
  40. for (let n = 0; n < count; n++) {
  41. this['length' + n] = col;
  42. }
  43. }
Step 15
Next, we will open the app.component.html file and add the following code:
  1. <app-password
  2. [passwordCheck]="passwordform.value.password"
  3. (Strength)="passwordValid($event)"
  4. ></app-password>

Summary

In this article, we have learned how to add a child component using selector, @input and @output decoders for component interaction.