password-strength icon indicating copy to clipboard operation
password-strength copied to clipboard

Update `customValidator`

Open bazaim opened this issue 2 years ago • 0 comments

Bug Report

- [X] bug report
- [ ] feature request

OS and Version?

Windows 10

Versions

Angular CLI: 15.0.4
Node: 18.12.1
Package Manager: npm 9.2.0
OS: win32 x64

Angular: 15.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.4
@angular-devkit/build-angular   15.0.4
@angular-devkit/core            15.0.4
@angular-devkit/schematics      15.0.4
@angular/cdk                    15.0.3
@angular/fire                   7.5.0
@angular/material               15.0.3
@schematics/angular             15.0.4
rxjs                            7.5.7
typescript                      4.8.4

Repro steps

HTML :

      <mat-form-field>
        <mat-label>Password</mat-label>
        <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
        <input matInput #password
               [type]="toggle.type"
               required
               [(ngModel)]="user.password">
      </mat-form-field>
      <mat-password-strength #passwordComponent
        [password]="password.value"
        [customValidator]="regexPasswordConfirm"></mat-password-strength>

      <mat-form-field>
        <mat-label>Confirm password</mat-label>
        <mat-pass-toggle-visibility #toggleConfirm matSuffix></mat-pass-toggle-visibility>
        <input matInput #passwordConfirm
               [type]="toggleConfirm.type"
               required
               [(ngModel)]="user.passwordConfirm"
               (keyup)="confirmPasswordChange($event)">
      </mat-form-field>
      <mat-password-strength #passwordConfirmComponent [password]="passwordConfirm.value"></mat-password-strength>

      <mat-password-strength-info
        [passwordComponent]="passwordComponent"
        customCharsCriteriaMsg="Confirm password not indentical to password"></mat-password-strength-info>

TS :

  confirmPasswordChange(ev: any) {
    this.regexPasswordConfirm = new RegExp('^' + ev.target.value.replace(/[.*+?^${}()|[\]\\]/, '\\$&'));
  }

The log given by the failure

image

Desired functionality

I would like to be able to update the regex value.

bazaim avatar Jan 10 '23 15:01 bazaim