angular - password and confirm password field validation angular2 reactive forms -

i need check whether password , confirm password fields have same value using reactive form angular2. did see lot of answers on same here,angular 2 form validating repeat password ,comparing fields in validator angular2, none seemed work me.can please help."this" undefined in validate function :( . sharing code,

this.addedituserform = this.builder.group({             firstname: ['', validators.required],             lastname: ['', validators.required],             title: ['', validators.required],             email: ['', validators.required],             password: ['', validators.required],             confirmpass: ['', [validators.required, this.validatepasswordconfirmation]]         }); validatepasswordconfirmation(group: formgroup): any{         let valid = true;         // if (this.addedituserform.controls.password != this.addedituserform.controls.confirmpass) {         //     valid = false;         //     this.addedituserform.controls.confirmpass.seterrors({validatepasswordconfirmation: true});         // }         return valid;     } 

edit:

comapred original answer, best have nested group inside form group, have custom validator checking form group password , confirmpass, when either of fields changed, validator fired, of fires when confirmpass field modified.

so instead inside outer formgroup:

// ... passwords: this.fb.group({   password: ['', [...]],   confirmpass: ['', [...]] }, {validator: this.checkpasswords}) // add validator whole group // ... 

and validator this:

checkpasswords(group: formgroup) { // here have 'passwords' group   let pass = group.controls.password.value;   let confirmpass = group.controls.confirmpass.value;    return pass === confirmpass ? null : { notsame: true }      } 

showing validation error done this:

*ngif="addedituserform.haserror('notsame', 'passwords')" 

of course don't need have nested group, it's better not have custom validator fire every time when changes happen form. way it's fired when changes happen inner form group.

---

original post:

i see in comment found different solution, can following...

as mentioned, need bind this:

this.validatepasswordconfirmation.bind(this) 

but in validatepasswordconfirmation, form undefined, need check if addedituserform exists (is other undefined). keep in mind also, if passwords match, need return null, translates field valid. obvious initial thought return true, here need return null. here how validatepasswordconfirmation like:

validatepasswordconfirmation(control: formcontrol): {   if(this.addedituserform) {     return control.value === this.addedituserform.get('password').value ? null : { notsame: true}   } } 

and here how use in template display error message:

<small *ngif="addedituserform.haserror('notsame', 'confirmpass')">     passwords not match! </small>