javascript - Custom Validation Mistery

Question

I'm building a custom validation for my form. It's a simple one, it should check if the password and confirm password matches.

The problem is that even thou I believe the logic is correct, I'm getting the opposite of what I want.

initForm() {
        this.registerForm = new FormGroup({
            email: new FormControl('', [Validators.required, Validators.email]),
            password: new FormControl('', [Validators.required]),
            confirmPassword: new FormControl('', [Validators.required])
        }, { validators: this.customValidators });
    }

    customValidators(c: AbstractControl) {
        const mainPass = c.get('password').value;
        const confirmPass = c.get('confirmPassword').value;

        return mainPass === confirmPass ? { status: 'VALID' } : null;
    }

and on my button on the HTML I have this:

<ion-button color="tertiary" type="submit" expand="block" [disabled]="!registerForm.valid">REGISTER</ion-button>

Can anybody help me with this mystery? Thanks

question from:https://stackoverflow.com/questions/65516760/custom-validation-mistery

Answer 1

The condition should be reversed.

customValidators(c: AbstractControl) {
    const mainPass = c.get('password').value;
    const confirmPass = c.get('confirmPassword').value;

    return mainPass === confirmPass ? null : { 'inValid' : true };
}