angular forms 'confirm password' showing error

Question

I am using angular forms to create a register form. I have made a custom validator which checked if the password is the same as confirm password field. Although the error of 'password do not match' does not show, the input is still red until all the fields are entered.

The form builder with the custom validator method checkPasswords

this.registerForm = this.formBuilder.group({
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required]],
  confirmPassword: ['', [Validators.required]]
  },
  { validator: this.checkPasswords });


checkPasswords(group: FormGroup) {
  // here we have the 'passwords' group
  let pass = group.get('password').value;
  let confirmPassword = group.get('confirmPassword').value;
  return pass === confirmPassword ? null : { notSame: true };
}

and the html below

<mat-form-field required>
    <input matInput type="password" placeholder="Password" formControlName="password">
    <mat-error>Password is not valid</mat-error>
</mat-form-field>

<mat-form-field required>
    <input matInput type="password" placeholder="Confirm password"
           formControlName="confirmPassword"
           [errorStateMatcher]="matcher">
    <mat-error *ngIf="registerForm.hasError('notSame')">Passwords do not match</mat-error>
</mat-form-field>

I have tried to do some debugging, and I think it is because the form group status is 'invalid' until all fields are entered, but the form group control for confirmPassword is showing valid. How can I get status for confirmPassword to use the status of its control?

Thanks

Not entirely sure what the question is…if you're wondering why confirmPassword initially shows as valid, it's because initially, both password and confirmPassword are empty strings… — Will Alexander
Hi, thanks for the response, apologies if the questions was a little confusing. The issue was that, even though the password and confirmPassword were both valid and no error text was being displayed, the input box was still red (error color). This was because the formGroup was invalid. I was not referencing the formControl of confirmPassword. It is now fix by passing through the password and confirmPassword as parameters in the validator — DevStacker

Sachin Gupta Sachin Gupta · Accepted Answer · 2019-10-18T03:51:52

This is because of angular material. If there is no error on the given control, <mat-error> will not be visible. You need to set the error on the confirmPassword field to display the error.

angular forms 'confirm password' showing error

2 Answers

OPTIONS: