Angular 2 Match password in a form

Question

I know this question has been asked other times, in similar forms, but I have a little different situation; let me explain:

I have a reset password form, with 3 fields (old password, new password, confirm password). Of course I need to check if the submitted passowrd is equal the submittedw confirmpassword and I want to do it before clicking submit. I defined the form as follows (in the component.ts)

this.form = fb.group({
  // define your control in you form
  oldpassword: ['', Validators.required],
  password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],
  confirmPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]]
}, {
  validator: PasswordValidation.MatchPassword // your validation method
});

export class PasswordValidation {

static MatchPassword(AC: AbstractControl) {
    const password = AC.get('password').value; // to get value in input tag
    const confirmPassword = AC.get('confirmPassword').value; // to get value in input tag
    if (password !== confirmPassword) {
      AC.get('confirmPassword').setErrors({MatchPassword: true})
    } else {
        return null
    }
}
}

Here is the problem, the form is not valid if I change the "confirm password field" before compiling the "new password" one. In other words, if I respect vertical o9rder of the fields, all is OK, but if I compile the fields in different order, then the form is still invalid.

here is the html code : (as you can see, it is a bit confusing because I have other UX constraint ehich corresponds to user possible interactions)


        
          Inserisci vecchia password
          
          
            Campo obbligatorio
          
        
        
          Inserisci nuova password
          
          
            Campo obbligatorio
          
          
            Lunghezza minima: 4 caratteri.
          
        
        
          Ripeti nuova password
          
          
            Le password non corrispondono

I'm not an angular expert, so if you please could suggest me other best practice I'll be really happy. thanks to all

user_3633742 · Answer

You are setting your errors directly on the confirmation field. If you don't touch that field anymore, errors are set upon it and will never get removed. Angular run validators against a field only if it has been edited because you can legitimately think that if a field is marked as error and hasn't been edited, it is still in error state.

I would recommend you to put this error directly upon the FormGroup instead :

static MatchPassword(AC: AbstractControl) {
    const password = AC.get('password').value; // to get value in input tag
    const confirmPassword = AC.get('confirmPassword').value; // to get value in input tag
    if (password !== confirmPassword) {
      return {MatchPassword: true};
    } else {
        return null
    }
}


            Le password non corrispondono

user_4128529 · Answer

this.profileForm = this.formBuilder.group({
  password: [this.profile.password, [
    Validators.required,
    Validators.minLength(4)]
  ],
  passwordCheck: [this.profile.password, [
    Validators.required,
    Validators.minLength(4)
  ]],
  oldPassword: [this.profile.oldPassword, [
    Validators.required]],
}, { validator: matchingPasswordsValidator('password', 'passwordCheck') });

this is a form i use for my password change. It uses a seperate validator that doesn't validate a field it validates the entire form.

export function matchingPasswordsValidator(passwordKey: string, confirmPasswordKey: string) {
  return (group: FormGroup): { [key: string]: any } => {
    let password = group.controls[passwordKey];
    let confirmPassword = group.controls[confirmPasswordKey];

    if (password.value !== confirmPassword.value) {
      return {
        mismatchedPasswords: true
      };
    }
  }
}

@Directive({
  selector: '[appMatchingPasswordsValidator]',
  providers: [{
    provide: NG_VALIDATORS, useExisting: MatchingPasswordsValidatorDirective, multi: true
  }]
})
export class MatchingPasswordsValidatorDirective {

  constructor() { }

  validate(c: AbstractControl) {
    matchingPasswordsValidator("test", "test");
  }
}

Then this is the directive used to match the passwords. or any 2 keys you give it present in the form.

user_9949983 · Answer

I know this is a late answer to your question but wanted to show a way. You can compare the values of the inputs by calling .value on your ngModel.

you can see how it works on the below block of code

 
    
        Current password and New Password can't match.

Long Version of the code

    
        
            
                                                
            
            
        
    

    
    
        
            Current password and New Password can't match.
        
    

    
        
            password is required.
        
    

    
        
            
                
            
            
        
    


    
        
            password is required.
        
    

    
    
        
            New password and Retyped Password don't match.

Angular 2 Match password in a form

4 Answers