How to validate password strength with Angular 5 Validator Pattern

Question

I need to validate the strength of a password input form field. The requirements are:

• at least one lowercase char
• at least one uppercase char
• at least one number
  (no matter the order)

What I have searched and tried so far goes below, the results are inconsistent.

It seems to validate the order of the regex validation.
What I need is to just check if at least one of the char "types" are present.

import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';  @Component({     selector: 'signup',     templateUrl: './signup.component.html',     styleUrls: ['./signup.component.scss'] }) export class SignupComponent {      form: FormGroup;      constructor() {         this.init();     }      init() {         this.form = this.fb.group({             name: ['', [Validators.required]],             email: ['', [Validators.required, Validators.email],             password: ['', [                 Validators.required,                  Validators.pattern('((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,30})')             ]]         });      } } 

Answer 1

I took a stab at this with Angular's built-in pattern validator and was able to come up with the following that checks for:

• At least 8 characters in length
• Lowercase letters
• Uppercase letters
• Numbers

• Special characters

  password: [   '',   [     Validators.required,     Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')    ] ] 

I'll add that I'm by no means a regex expert. This is simply what worked for me for a closely related case to the OP. Maybe it will help someone else. Mozilla's documentation helped a lot in figuring this out, specifically the Writing a regular expression pattern section.

Answer 2

I´ve not been able to use correctly the Validator Pattern, so I made a Custom Validator, and validate the password field string with three simple regex.
Anyway, I look forward to use correctly the Angular Validator Pattern.

Custom Validator

// password.validator.ts  import { FormControl } from '@angular/forms';  export interface ValidationResult {     [key: string]: boolean; }  export class PasswordValidator {      public static strong(control: FormControl): ValidationResult {         let hasNumber = /\d/.test(control.value);         let hasUpper = /[A-Z]/.test(control.value);         let hasLower = /[a-z]/.test(control.value);         // console.log('Num, Upp, Low', hasNumber, hasUpper, hasLower);         const valid = hasNumber && hasUpper && hasLower;         if (!valid) {             // return what´s not valid             return { strong: true };         }         return null;     } } 

Replaced the Validator Pattern with my Custom Validator

// signup.component.ts  import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { PasswordValidator } from 'validators/password.validator';  @Component({     selector: 'signup',     templateUrl: './signup.component.html',     styleUrls: ['./signup.component.scss'] }) export class SignupComponent {      form: FormGroup;      constructor() {         this.init();     }      init() {         this.form = this.fb.group({             name: ['', [Validators.required]],             email: ['', [Validators.required, Validators.email],             password: ['', [                 Validators.required,                  PasswordValidator.strong             ]]         });      } }