Angular 6 Validate Confirm Password without using Reactive forms

Question

I Just need to compare password and validate confirm password fields. When Password do not match, I need to Display message and show Error : Passwords do not match And When Error is displayed I need set invalid of the input field and thus disable button.

<form name="SignUpForm" #SignUpForm="ngForm"><br>
  <label><i class="fa fa-key"></i>
    <input 
      type="password" 
      name="Pwd" 
      placeholder="Password" 
      required 
      pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}" 
      [(ngModel)]="SignUpNgsForm.Pwd" 
      #Pwd="ngModel">
  </label>
  <div *ngIf="(Pwd.touched || Pwd.dirty) && Pwd.invalid" class="ErrorCls">
    <span *ngIf="Pwd.errors.required">Password is required.</span>
    <span *ngIf="Pwd.errors.pattern">Enter Strong password.</span><br>
  </div>
  <label><i class="fa fa-key"></i>
    <input 
      type="password" 
      name="RptPwd" 
      placeholder="Repeat-Password" 
      required 
      pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"
      [(ngModel)]="SignUpNgsForm.RptPwd"
      #RptPwd="ngModel">
  </label>
  <div *ngIf="(RptPwd.touched || RptPwd.dirty) && RptPwd.invalid" class="ErrorCls">
    <span *ngIf="RptPwd.errors.required && RptPwd.invalid">Repeat-Password is required.</span>
    <span *ngIf="RptPwd.errors.pattern">Enter Strong password.</span>
  </div>
  <div *ngIf="(RptPwd.touched || RptPwd.dirty)" class="ErrorCls">
    <span *ngIf="!RptPwd.errors && SignUpNgsForm.Pwd != SignUpNgsForm.RptPwd">Passwords do not match</span>
  </div>
  <br>
  <button [disabled]="!SignUpForm.form.valid" (click)="SignUp(SignUpForm)">Sign Up</button>
</form>

Also Tried :

Add in Component.html

<div *ngIf="(RptPwd.touched || RptPwd.dirty)" class="ErrCls">
  <span *ngIf="CheckMatchPassword(RptPwd)">Passwords do not match</span>
</div>

Add in Component.ts

CheckMatchPassword(RptPwd)
{
    if(!RptPwd.errors && this.SignUpNgsForm.Pwd != this.SignUpNgsForm.RptPwdreturn)
    {    
        return RptPwd.control.setErrors({'mismatch': true});
    }
    else
    {
        return RptPwd.control.setErrors(null);
    }
}

For this I get error :

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.

How do I get this, without using FormControl or Reactive Forms.

dockleryxk dockleryxk · Accepted Answer · 2019-01-23T20:08:53

I recently had this issue so I created a validator to handle this. As a note, I rely on lodash, but I just use it to remove non-unique and empty values

The directive code:

import { Directive, forwardRef, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, FormGroup, ValidationErrors } from '@angular/forms';
import * as _ from 'lodash';

@Directive({
  selector: '[pugMatchValidator]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => MatchValidatorDirective), multi: true }
  ]
})
export class MatchValidatorDirective implements Validator {

  // an array of the names of form controls to check
  @Input('pugMatchValidator') controlsToMatch: string[];

  constructor() { }

  validate(formGroup: FormGroup): ValidationErrors | null {
    let values = [];
    if (this.controlsToMatch) {
      for (let controlName of this.controlsToMatch) {
        const control = formGroup.controls[controlName];
        if (control && (control.touched || control.dirty)) {
          values.push(control.value);
        }
      }

      // compact removes empty and null values
      // uniq gets rid of duplicate fields, so one value should remain if everything matches
      values = _.uniq(_.compact(values));

      if (values.length > 1) {
        return { unMatchedFields: true };
      }
    }
    return null;
  }

}

Next, just pass in an array of the controls you want to check:

<form name="SignUpForm" #SignUpForm="ngForm" [pugMatchValidator]="['Pwd', 'RptPwd']">

Finally, you can just check if your form is valid or not with SignUpForm.valid

Edit: In your case, to display the error you would use something like this:

<div *ngIf="SignUpForm.errors?.unMatchedFields && (RptPwd.touched || RptPwd.dirty)" class="ErrCls">
    Passwords do not match
</div>

Angular 6 Validate Confirm Password without using Reactive forms

1 Answers