Question

33

Password Confirm Angular Material

rated 0 times [ 38] [ 5] / answers: 1 / hits: 27610 / 6 Years ago, wed, june 6, 2018, 12:00:00

I'm working to authenticate a user with Angular Material. I'm currently trying to get the proper mat-error to display when the confirmation password doesn't match the first entered pw.

Here is my html:

 <mat-form-field hintLabel=Minimum 8 Characters class=>

                            <mat-label>Password</mat-label>

                            <input 

                            matInput 

                            #input 

                            type=password

                            formControlName=password>

                            <mat-hint align=end>{{input.value?.length || 0}}/8</mat-hint>

                        </mat-form-field>



                        <mat-form-field>

                            <mat-label>Confirm</mat-label>

                            <input 

                            matInput

                            required  

                            type=password

                            #confirm

                            formControlName=confirmPassword>

                            <mat-error *ngIf=form.get('confirmPassword').invalid || confirmPasswordMismatch>Password does not match</mat-error>

                            </mat-form-field>

The error displays once the user has focused on password confirmation and unfocuses without entering anything. Once the user enters anything, the error goes away even though the confirmation doesn't match the password.

Here is my TS file:

public get confirmPasswordMismatch() {

        return (this.form.get('password').dirty || this.form.get('confirmPassword').dirty) && this.form.hasError('confirmedDoesNotMatch');

    }



this.form = new FormGroup({

            userName: new FormControl(null, [Validators.required]),

            fullName: new FormControl(null, [Validators.required]),

            email: new FormControl(null, [Validators.required, Validators.pattern(this.EMAIL_REGEX)]),

            password: new FormControl(null),

            confirmPassword: new FormControl(null, ),

        }, (form: FormGroup) => passwordValidator.validate(form));

The desired effect is that the error shows when the user has entered text into pw input when confirm pw is empty and to show an error when both have text but confirm doesn't match pw.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dorab

Add To Favorites

Follow

Total Points: 22

Total Questions: 106

Total Answers: 99

Location: El Salvador

Member since Fri, May 8, 2020

4 Years ago

answered 6 Years ago kayden · Accepted Answer

I solved it like this:

Template:

  <mat-form-field>

    <input matInput type=password placeholder=Password formControlName=password (input)=onPasswordInput()>

    <mat-error *ngIf=password.hasError('required')>Password is required</mat-error>

    <mat-error *ngIf=password.hasError('minlength')>Password must have at least {{minPw}} characters</mat-error>

  </mat-form-field>



  <mat-form-field>

    <input matInput type=password placeholder=Confirm password formControlName=password2 (input)=onPasswordInput()>

    <mat-error *ngIf=password2.hasError('required')>Please confirm your password</mat-error>

    <mat-error *ngIf=password2.invalid && !password2.hasError('required')>Passwords don't match</mat-error>

  </mat-form-field>

Component:

export class SignUpFormComponent implements OnInit {



  minPw = 8;

  formGroup: FormGroup;



  constructor(private formBuilder: FormBuilder) { }



  ngOnInit() {

    this.formGroup = this.formBuilder.group({

      password: ['', [Validators.required, Validators.minLength(this.minPw)]],

      password2: ['', [Validators.required]]

    }, {validator: passwordMatchValidator});

  }



  /* Shorthands for form controls (used from within template) */

  get password() { return this.formGroup.get('password'); }

  get password2() { return this.formGroup.get('password2'); }



  /* Called on each input in either password field */

  onPasswordInput() {

    if (this.formGroup.hasError('passwordMismatch'))

      this.password2.setErrors([{'passwordMismatch': true}]);

    else

      this.password2.setErrors(null);

  }

}

Validator:

export const passwordMatchValidator: ValidatorFn = (formGroup: FormGroup): ValidationErrors | null => {

  if (formGroup.get('password').value === formGroup.get('password2').value)

    return null;

  else

    return {passwordMismatch: true};

};

Notes:

Thanks to onPasswordInput() being called from either password field, editing the first password field (and thus invalidating the password confirmation) also causes the mismatch error to be displayed in the password confirmation field.

The *ngIf=password2.invalid && !password2.hasError('required') test for the password confirmation field ensures that never both error messages (mismatch and required) are displayed at the same time.