Home / Questions / 554267
Accepted
sirdaiz
Asked: 2022-08-29 23:45:35 +0800 CST 2022-08-29 23:45:35 +0800 CST

Regular expression in Validators.pattern

  • 772

I have a password field, which must have a minimum of 12 characters, a special character, an uppercase letter and a number

password: ['', Validators.compose([Validators.pattern("^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$"), 
               Validators.minLength(12), Validators.required])],

But if I don't put any capital letters it works.

<input class="form-control w100" formControlName="password" type="text" minlength="12" maxlength="50" required autofocus>
    <div *ngIf="form.controls['password'].invalid && (form.controls['password'].dirty || form.controls['password'].touched)" pattern="^[a-zA-Z0-9]+$" class="alert alert-danger pt10">
      <span class="p-inline-message p-inline-message-error" *ngIf="this.form.get('password')?.errors.required">Field is required</span>
      <span class="p-inline-message p-inline-message-error" *ngIf="this.form.get('password')?.errors.minlength">Must be at least 12 characters long.</span>
      <span class="p-inline-message p-inline-message-error" *ngIf="this.form.get('password')?.errors.pattern">
        Must be at least 1 special character.<br>
        Must be at least 1 number.<br>
        Must be at least 1 uppercase letter.
      </span>
    </div>

Is there any way to separate/specify if the failure is because a number is missing? Now the error is generalized by the pattern

javascript

1 Answers

  1. Best Answer

    You could do something like this:

    import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms';

export function getPasswordValidator(): ValidatorFn {
  return (control:AbstractControl) : ValidationErrors | null => {

    const value = control.value;

    if (!value) {
      return null;
    }
    // falta definir caracteres especiales
    const hasSpecialChar = /[$%&]/.test(value);
    const hasUpperCase = /[A-Z]+/.test(value);
    const hasLowerCase = /[a-z]+/.test(value);
    const hasNumeric = /[0-9]+/.test(value);

    let result = null;
    if (!hasSpecialChar) {
      result = {missingSpecialChar: true};
    }
    if (!hasUpperCase) {
      result = (result || {}).missingUpperCase = true;
    }
    if (!hasLowerCase) {
      result = (result || {}).missingLowerCase = true;
    }
    if (!hasNumeric) {
      result = (result || {}).missingNumeric = true;
    }


    return result;
  }
}

    and use it like this:

    password: ['', Validators.compose(getPasswordValidator(), 
           Validators.minLength(12), Validators.required])],
    • 1