Angular 2 - Password validation on Reactive form

Question

I am building a form that should validate both new and repeat new password. However, I am getting errors on their tests which I couldn't figure out how to solve them.

First, I have a method to initiate the desired form:

private initForm(): any {
  this.form = this.fb.group({
     oldPassword': ["", Validators.compose([Validators.required, Validators.minLength(6)])]
  })

  let newPassword = new FormControl(null, [
    Validators.required,
    Validators.minLength(6),
    this.validNewPassword(this.form)
  ])

  let repeatNewPassword = new FormControl(null, [
    Validators.required, 
    Validators.minLength(6),
    this.validPasswordConfirm(this.form)
  ]);

  this.form.addControl('newPassword', newPassword);
  this.form.addControl('repeatNewPassword', repeatNewPassword);
}

And here I declare both methods that should handle its values:

private validNewPassword(form: any): any {
  return ((control: FormControl) => {
    let newPassword = control.value;
    if (newPassword == form.value.oldPassword && newPassword !== form.value.repeatNewPassword) {
      return {
        newPassword: true
      }
    }
  return null;
  })   
}

private validPasswordConfirm(form: any): any {
  return ((control: FormControl) => {
    let repeatPassword = control.value;
    if (repeatPassword == form.value.oldPassword && repeatPassword !== form.value.newPassword) {
      return {
        repeatPassword: true
      }
    }
  return null;
  })   
}

Both new password and repeat new password should be equal, and still, different from current password to be valid. But when I run its test, I get the following results for each:

it('should test new password validation', () => {
    let errors = {};
    let oldPassword = comp.form.controls['oldPassword'];
    let newPassword = comp.form.controls['newPassword'];
    let repeatNewPassword = comp.form.controls['repeatNewPassword']; 
    errors = newPassword.errors || {};

    expect(newPassword.valid).toBeFalsy();

    expect(errors['required']).toBeTruthy(); 

    newPassword.setValue('12345');
    errors = newPassword.errors || {};    
    expect(errors['minlength']).toBeDefined();

    // old is equal new
    oldPassword.setValue('123456')
    newPassword.setValue('123456');
    repeatNewPassword.setValue('123455');
    errors = repeatNewPassword.errors || {};    
    expect(errors['newPassword']).toBeTruthy(); // >> Expected undefined to be truthy

    // all equal
    oldPassword.setValue('123456');
    newPassword.setValue('123456');
    repeatNewPassword.setValue('123456'); 
    errors = newPassword.errors || {};    
    expect(errors['newPassword']).toBeTruthy();

    // all different
    oldPassword.setValue('123123');
    newPassword.setValue('123455');
    repeatNewPassword.setValue('123456'); 
    errors = newPassword.errors || {};
    expect(errors['newPassword']).toBeTruthy(); // >> Expected undefined to be truthy

    // valid
    oldPassword.setValue('123456');
    newPassword.setValue('654321');
    repeatNewPassword.setValue('654321');   
    expect(newPassword.valid).toBeTruthy();
  }); 


it('should test repeat password validation', () => {
    let errors = {};
    let oldPassword = comp.form.controls['oldPassword'];
    let newPassword = comp.form.controls['newPassword'];
    let repeatNewPassword = comp.form.controls['repeatNewPassword']; 
    errors = repeatNewPassword.errors || {};

    expect(newPassword.valid).toBeFalsy();

    expect(errors['required']).toBeTruthy(); 

    repeatNewPassword.setValue('12345');
    errors = repeatNewPassword.errors || {};    
    expect(errors['minlength']).toBeDefined();

    // old is equal repeat
    oldPassword.setValue('123456')
    newPassword.setValue('123455');
    repeatNewPassword.setValue('123456');
    errors = repeatNewPassword.errors || {};    
    expect(errors['repeatPassword']).toBeTruthy();

    // all different
    oldPassword.setValue('123454')
    newPassword.setValue('123455');
    repeatNewPassword.setValue('123456');
    errors = repeatNewPassword.errors || {};    
    expect(errors['repeatPassword']).toBeTruthy(); // >> Expected undefined to be truthy

    // all equal
    oldPassword.setValue('123456');
    newPassword.setValue('123456');
    repeatNewPassword.setValue('123456');
    errors = repeatNewPassword.errors || {};    
    expect(errors['repeatPassword']).toBeTruthy(); // >> Expected undefined to be truthy

    // valid
    oldPassword.setValue('123455');
    newPassword.setValue('123456');
    repeatNewPassword.setValue('123456');    
    expect(repeatNewPassword.valid).toBeTruthy(); 
  });

I would appreciate if someone could help me with it. Thanks!

visit this link to get answer https://stackoverflow.com/questions/44449673/custom-validator-on-reactive-form-for-password-and-confirm-password-matching-get — Karnan Muthukumar, Jun 11 '18 at 12:33
Thank you, I will post how I solved it as an answer here, which was based on the link you sent @KarnanMuthukumar — Caike Motta, Jun 11 '18 at 17:38

score 0 · Accepted Answer · answered Jun 11 '18 at 17:45

This is how I solved it:

1) Initiate the form as expected, but now I validate the whole form

  private initForm(): any {
    this.form = new FormGroup({
      'oldPassword': new FormControl(null, [Validators.required, Validators.minLength(6)]),
      'newPassword': new FormControl(null, [Validators.required, Validators.minLength(6)]),
      'repeatNewPassword': new FormControl(null, [Validators.required, Validators.minLength(6)])
    }, this.validatePassword);
  }

  private validatePassword(fg: FormGroup) {
    return fg.get('newPassword').value === fg.get('repeatNewPassword').value && 
      fg.get('newPassword').value !== fg.get('oldPassword').value && 
      fg.get('repeatNewPassword').value !== fg.get('oldPassword').value 
      ? null : { 'invalidPassword': true };
  }

2) HTML validation

<ion-input class="password-field" id="oldPassword" [type]="type" formControlName="oldPassword"
  [class.invalid]="!form.valid && (form.get(['oldPassword']).dirty || submitAttempt)">
</ion-input>

3) Test validation

  it('should test new password validation', () => {
    let errors = {};
    let oldPassword = comp.form.controls['oldPassword'];
    let newPassword = comp.form.controls['newPassword'];
    let repeatNewPassword = comp.form.controls['repeatNewPassword']; 
    errors = comp.form.errors || {};

    expect(comp.form.valid).toBeFalsy();

    newPassword.setValue('12345');
    errors = newPassword.errors || {};    
    expect(errors['minlength']).toBeDefined();

    // old is equal new
    oldPassword.setValue('123456')
    newPassword.setValue('123456');
    repeatNewPassword.setValue('123455');
    errors = comp.form.errors || {};    
    expect(errors['invalidPassword']).toBeTruthy();

    // all equal
    oldPassword.setValue('123456');
    newPassword.setValue('123456');
    repeatNewPassword.setValue('123456'); 
    errors = comp.form.errors || {};    
    expect(errors['invalidPassword']).toBeTruthy();

    // all different
    oldPassword.setValue('123123');
    newPassword.setValue('123455');
    repeatNewPassword.setValue('123456'); 
    errors = comp.form.errors || {};    
    expect(errors['invalidPassword']).toBeTruthy();

    // valid
    oldPassword.setValue('123456');
    newPassword.setValue('654321');
    repeatNewPassword.setValue('654321');   
    expect(newPassword.valid).toBeTruthy();
  });

Angular 2 - Password validation on Reactive form

1 Answers1