Skip to content

Update customValidator #384

@bazaim

Description

@bazaim

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions