Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

password and confirm password field validation angular2 reactive forms

I need to check whether password and confirm password fields have same value using reactive form angular2. I did see a lot of answers on the same here,Angular 2 form validating for repeat password ,Comparing fields in validator with angular2, but none seemed to work for me.Can someone please help."this" is undefined in my validate function :( . Sharing my 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;     } 
like image 902
RemyaJ Avatar asked Apr 19 '17 05:04

RemyaJ


People also ask

How do you check validation in reactive form?

html file, add the ngIf directive to show the message when the form is submitted and the required validator is true. Save the changes and run the app. Click on the sign-in button without entering the first name and you will be able to see the required validation message.

How does angular material validate password and confirm password?

export const passwordMatchValidator: ValidatorFn = (formGroup: FormGroup): ValidationErrors | null => { if (formGroup. get('password'). value === formGroup. get('password2').

What is ValidatorFn?

ValidatorFnlinkA function that receives a control and synchronously returns a map of validation errors if present, otherwise null.


1 Answers

This is what eventually worked for me -

this.addEditUserForm = this.builder.group({             firstName: ['', Validators.required],             lastName: ['', Validators.required],             title: ['', Validators.required],             email: ['', Validators.required],             password: ['', Validators.required],             confirmPass: ['', Validators.required]         },{validator: this.checkIfMatchingPasswords('password', 'confirmPass')});    checkIfMatchingPasswords(passwordKey: string, passwordConfirmationKey: string) {           return (group: FormGroup) => {             let passwordInput = group.controls[passwordKey],                 passwordConfirmationInput = group.controls[passwordConfirmationKey];             if (passwordInput.value !== passwordConfirmationInput.value) {               return passwordConfirmationInput.setErrors({notEquivalent: true})             }             else {                 return passwordConfirmationInput.setErrors(null);             }           }         } 
like image 129
RemyaJ Avatar answered Oct 03 '22 11:10

RemyaJ