Currently, the sign-up button only becomes enabled if the signup form is valid. However, I am facing an issue where the button is getting enabled even when the password and confirm password fields do not match.
I suspect there might be a problem with my implementation of this.equalWithPasswordValidator(). Any thoughts on what could be causing this issue? Thanks in advance.
#html code
<button mat-raised-button class="full-width v-btn-lrg mt-0px" color="primary" type="submit"
[disabled]="signupForm.invalid">
{{labels.BUTTON.SETUP}}
</button>
#ts code
this.signupForm = this.fb.group({
confirmPassword: [
'',
[Validators.required, this.equalWithPasswordValidator.bind(this)],
],
password: [
'',
[
this.validatePasswordRequired,
this.validateMinimumPassword,
this.validatePasswordUpperCase,
this.validatePasswordLowerCase,
this.validatePasswordSpecialCharacter,
this.validateOneNumber,
],
],
});
}
equalWithPasswordValidator(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const equal = control.value === this.signupForm.get('password').value;
return equal ? { notEqual: { value: 'Passwords do not match' } } : null;
};
}