Angular how to minimum 8 characters including 1 uppercase 1 lowercase 1 number 1 special character using validation

Question

i want it to show on my html element using ngif minimum 8 characters including 1 uppercase 1 lowercase 1 number 1 special character

register.component.html

<form [formGroup]="registerForm" novalidate>
  <label for="pNumber" class="text-primary">PASSWORD*</label>
  <input type="text" id="passWord" class="form-control form-rounded" placeholder="Ilagay ang Password"
    formControlName="passWord" #passWord />
  <ul *ngIf="registerForm.get('passWord')?.errors?.['pattern']">
    <li class="text-danger" *ngIf="registerForm.get('passWord')?.hasError('has8Letter')">
      <i class="fa fa-check-circle-o text-danger" aria-hidden="true"></i> &nbsp; At
      least 8 characters
    </li>
    <li *ngIf="registerForm.get('passWord')?.hasError('hasCapitalCase')">
      <i class="fa fa-check-circle-o" aria-hidden="true"></i> &nbsp; At
      least 1 Capital Letter and 1 Small Letter
    </li>
    <li class="text-danger" *ngIf="registerForm.get('passWord')?.hasError('hasNumber')">
      <i class="fa fa-check-circle-o" aria-hidden="true"></i> &nbsp; At
      least 1 Number
    </li>
    <li class="text-danger" *ngIf="registerForm.get('passWord')?.hasError('hasSpecialCharacter')">
      <i class="fa fa-check-circle-o" aria-hidden="true"></i> &nbsp; At
      least 1 non-alphanumeric character
    </li>
    <li class="text-danger" *ngIf="registerForm.get('passwordMatch')?.hasError('passwordMismatch')">
      <i class="fa fa-check-circle-o" aria-hidden="true"></i> &nbsp;
      Password is Match
    </li>
  </ul>
</form>

register.component.ts

registerForm!:FormGroup
  constructor(private fb: FormBuilder ){
    let hasNumber = /\d/
    let hasCapitalCase = /[A-Z][a-z]/

    let hasSpecialCharacter = /[ [!@#$%^&*()_+-=[]{};':"|,.<>/
    let has8Letter = /.{8,}/
    this.registerForm = new FormGroup({
      phoneNumber: new FormControl(null,[
        Validators.required,
       
      ]),
      passWord :new FormControl(null , Validators.compose([
        Validators.required,
        Validators.pattern(hasNumber),
        Validators.pattern(hasCapitalCase),
        Validators.pattern(hasSpecialCharacter),
        Validators.pattern(has8Letter),
       // Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[$@$!%*?&])(?=[^A-Z]*[A-Z]).{8}$/)
      ])),
      passwordMatch: fb.control(null,[
      Validators.required,
     
      ]),
      email:fb.control(null,[
        Validators.required
      ]),
      designation:fb.control(null,[
        Validators.required
      ]),
      fName:fb.control(null ,[Validators.required]),
      mName:fb.control(null ,[Validators.required]),
      lName:fb.control(null ,[Validators.required]),
      sName:fb.control(null ,[Validators.required]),
      birthday:fb.control(null ,[Validators.required]),
      province:fb.control(null ,[Validators.required]),
      city:fb.control(null ,[Validators.required]),
      barangay:fb.control(null ,[Validators.required]),
    }),
    {
      validators: this.passwordMatchValidator // Add any other validators as necessary
    }
  }
  passwordMatchValidator(control: AbstractControl): ValidationErrors | null {
    const password = control.get('passWord')?.value;
    const confirmPassword = control.get('passwordMatch')?.value;
  
    if (password !== confirmPassword) {
      control.get('passwordMatch')?.setErrors({ passwordMismatch: true });
    } else {
      control.get('passwordMatch')?.setErrors(null);
    }
    return null;
  }
}

Expected as per below

Answer 1

Pls take a look, I added such solution

https://stackblitz.com/edit/validator-formgroup-multi-pattern-scxyuf

How to achieve it:

 private regexValidator(regex: RegExp, error: ValidationErrors): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
  return control?.value && regex.test(control.value) ? null : error;
};

}

Next method is used just to show that those errors are 'registered' in FormControl error field.

 getErrorKeys(controlName) {
  return Object.keys(this.formGroup.controls[controlName].errors);
 }

Usage:

 Validators.compose([
      Validators.required,
      this.regexValidator(new RegExp(/.{8,}/), {
        min8Chars: true,
      }),
      this.regexValidator(this.hasSpecialCharacter, {
        missSpecialCharacter: true,
      })])