javascript - La validación de repetir contraseña no funciona

Estoy intentando validar la contraseña y repetir la contraseña en un formulario. Así:

import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';

 this.registerForm = fb.group({
        name: ['', Validators.required],
        email: ['', Validators.compose([Validators.pattern("[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"), Validators.required])],
        passwords: this.fb.group({
            password: ['', Validators.compose([Validators.required])],
            repassword: ['', Validators.compose([Validators.required])]
          }, this.comparePassword)
    });

function comparePassword(c: AbstractControl) {
return c.get('password').value === c.get(' repassword').value

}

** También intenté pasar return false en comparePassword como:

comparePassword(c: AbstractControl) {
      return false;
  }

** pero cada vez console.log(this.registerForm.valid); me da true, pero debería devolver false si estoy dando diferentes entradas en contraseña y repetir contraseña. Así que por favor ayúdenme a resolver esto. Gracias de antemano

Respuesta #1

Una cosa extraña: la validación personalizada debería devolver null cuando es válida.

Si la validación falla, deberías devolver un error de validación { "comparePassword": true }

Entonces creo que tu función debería ser:

comparePassword(control: AbstractControl) {
    if(control.get('password').value === control.get('repassword').value){
        return null;
    }

    return { “comparePassword”: true };
}

Validación personalizada en Angular.io: Esa función toma un objeto de control de Angular y devuelve null si el valor del control es válido, o un objeto de error de validación. El objeto de error de validación típicamente tiene una propiedad cuyo nombre es la clave de validación, 'forbiddenName', y cuyo valor es un diccionario arbitrario de valores que podrías insertar en un mensaje de error ({name}).

Respuesta #2

Esto debería funcionar

  comparePassword = (control: AbstractControl): {[key: string]: boolean} => {
    // get values
    const password = control.get('password');
    const repassword = control.get('repassword');
    // if no values, validated as true
    if (!password || !repassword) {
      return null;
    }
    // if values match, return null, else nomatch: true
    return password.value === repassword.value ? null : { nomatch: true };
  };

y luego en tu construcción de formulario, establece:

{validator: this.comparePassword}

this.registerForm = fb.group({
    name: ['', Validators.required],
    email: ['', Validators.compose([Validators.pattern("[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"), Validators.required])],
    passwords: this.fb.group({
        password: ['', Validators.compose([Validators.required])],
        repassword: ['', Validators.compose([Validators.required])]
      },{validator: this.comparePassword}) // here
});