typescriptangular7angular-reactive-formsangular-validationangular-validator

error not display although old password and new password are same?


I work on angular 7

I compare between old password and new password

if two both are same then error must display

but in my case old password and new password are same but error not display

why error not display and How to solve this problem ?

function CompareOldWithNew return false when both old and new are same value but error not display

changepassword.ts

 oldPassword = new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(10)]);
 newPass = new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(10),this.CompareOldWithNew("oldPassword")]);
  ngOnInit() {
    this.createFormResetPassword();
  }
  get c() { return this.ChangePasswordForm.controls; }

CompareOldWithNew(field_name): ValidatorFn {

    return (control: AbstractControl): { [key: string]: any } => {

      const input = control.value;
      const isnotequalValues = control.root.value[field_name] != input;
      return  isnotequalValues ? null :{'old password must not match New': {isnotequalValues}} ;

    };
  }
  createFormResetPassword() {
    this.ChangePasswordForm = this.formBuilder.group({
 oldPassword: this.oldPassword,
      newPass: this.newPass
})
}
onSubmit() {

    if (this.ChangePasswordForm.invalid) {
        return;
    }

changpaassword.html

<div class="form-group">
  <label >OldPassword</label><br>
  <input type="password" formControlName="oldPassword" class="textboxclass"   [ngClass]="{ 'is-invalid': submitted && c.oldPassword.errors }" />
  <div *ngIf="submitted && c.oldPassword.errors" class="invalid-feedback">
      <div *ngIf="c.oldPassword.errors.required">Password is required</div>
      <div *ngIf="c.oldPassword.errors.minlength">Password must be at least 6 characters</div>
  </div>
</div>

<div class="form-group">
  <label>New Password</label><br>
  <input type="password" formControlName="newPass" class="textboxclass"    [ngClass]="{ 'is-invalid': submitted && c.newPass.errors }" />
  <div *ngIf="submitted && c.newPass.errors" class="invalid-feedback">
      <div *ngIf="c.newPass.errors.required">Password is required</div>
      <div *ngIf="c.newPass.errors.minlength">Password must be at least 6 characters</div>
      <div *ngIf="c.newPass.errors.CompareOldWithNew">old password not match new </div>
  </div>
</div>

Solution

  • This will check for not equal input

    new FormControl('', notEqual('xxx'))
    

    Validator

    import { AbstractControl, Validators, ValidatorFn } from '@angular/forms';
    
    import { isPresent } from '../util/lang';
    
    export const notEqual = (val: any): ValidatorFn => {
      return (control: AbstractControl): {[key: string]: boolean} => {
        if (isPresent(Validators.required(control))) return null;
    
        let v: any = control.value;
    
        return val !== v ? null : {notEqual: true};
      };
    };