Ionic 3 password and confirm password validation using formBuilder

Question

I have a change password and it has a formBuilde that will validate each field in the form . I want to validate the confirmPassword and the newPassword in realtime.

This is what I have done so far:

in my provider.ts that I had imported in my page.ts

import { Injectable } from '@angular/core';
import { AbstractControl } from '@angular/forms';

@Injectable()
export class ValidationServiceProvider {

    constructor() {
        console.log('Hello ErrorHandlerProvider Provider')
    }

    // Validation for password and confirm password
    static MatchPassword(AC: AbstractControl) {
       const newPassword = AC.get('newPassword').value // to get value in input tag
       const confirmPassword = AC.get('confirmPassword').value // to get value in input tag
        if(newPassword != confirmPassword) {
            console.log('false');
            AC.get('confirmPassword').setErrors( { MatchPassword: true } )
        } else {
            console.log('true')
            AC.get('confirmPassword').setErrors(null);
        }
    }
}

I had an static method that will be calld in my page.ts

Now in my ts file.

Import the provider

import { ValidationServiceProvider } from '../../providers/validation-service';

and now the formBuilder

this.changePasswordForm = this.formBuilder.group({
      oldPassword: [
        "",
        Validators.compose([
          Validators.minLength(4),
          Validators.required
        ])
      ],
      newPassword: [
        "",
        Validators.compose([
          Validators.minLength(4),
          Validators.required
        ])
      ],
      confirmPassword: [
        "",
        Validators.compose([
          Validators.minLength(4),
          Validators.required
        ])
      ],
    }, {
      validator: ValidationServiceProvider.MatchPassword // Inject the provider method
    });

Now in my html file

<form [formGroup]="changePasswordForm" (submit)="submit()">
      <ion-item>
        <ion-label stacked>
          Your Old Password
        </ion-label>
        <ion-input formControlName="oldPassword" type="password"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label stacked>
          Your New Password
        </ion-label>
        <ion-input formControlName="newPassword" type="password"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label stacked>
          Confirm Password
        </ion-label>
        <ion-input formControlName="confirmPassword" id="confirmPassword" type="password"></ion-input>
        <p *ngIf="changePasswordForm.controls['confirmPassword'].errors?.MatchPassword" style="color: red">New password and Confirm password did not match</p>
      </ion-item>
        <button *ngIf="!changingPassword" type="submit" [disabled]="!changePasswordForm.valid" color="primary" ion-button block>Submit</button>

        <button *ngIf="changingPassword" color="primary" disabled ion-button block>
          <div class="center-vertical-horizontal">
            Processing...
            <ion-spinner class="button-spinner" name="crescent"></ion-spinner>
          </div>
        </button>
    </form>

Everything is working fine, But I want to display the text message to the user if the newPassword and the confirmPassword did not match.

Code below but not working.

<p *ngIf="changePasswordForm.controls['confirmPassword'].errors?.MatchPassword" style="color: red">New password and Confirm password did not match</p>

There are no errors at all. The p tag just won't display which I would want to.

I just followed this tutorial but didn't have enough much luck.

Can someone shed some light for me?

Thanks in advance. Appreciate if someone could help.

Answer 1

There seems to be nothing wrong with the code. But I've changed the <p> ta to a <ion-label> now it is working fine.

  <ion-label *ngIf="changePasswordForm.get('confirmPassword').errors?.MatchPassword" style="color: red">
                New password and Confirm password did not match
  </ion-label>

Find the working example in this stackblitz