es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No entiendo el retorno de la validación cruzada a los formularios impulsados por plantillas.

Estoy tratando de conseguir que devuelva “true” cuando las contraseñas no son iguales.

Mi componente:

this.restrict = new FormGroup({
email: new FormControl(this.user.email),
newPassword: new FormControl(”, [Validators.required, Validators.pattern(‘(?=\D\d)(?=[^a-z][a-z])(?=[^A-Z]*[A-Z]).{6,30}’)]),
confirmPassword: new FormControl(null, [Validators.required, Validators.minLength(6)]),
}, {validators: this.pwdMatchValidator});

get newPassword() { return this.restrict.get(‘newPassword’); }
get confirmPassword() { return this.restrict.get(‘confirmPassword’); }

pwdMatchValidator(frm: FormGroup) {
let pass = frm.get(‘newPassword’).value;
let confirmPass = frm.get(‘confirmPassword’).value;
console.log(pass);
console.log(confirmPass);
return pass === confirmPass ? null : { notSame: true };
}

En la plantilla:

No puede estar vacío
Debe tener al menos 6 caracteres.
Las contraseñas son diferentes.

Actualmente, siempre obtengo “false” como respuesta.

¿Las consolas console.log(pass); y console.log(confirmPass); funcionan y el botón de guardar sigue deshabilitado porque el campo no se validó, entonces, ¿cómo puedo obtener “notSame”? He intentado:

{{ restrict.get(‘confirmPassword’).errors?.notSame }}
{{ restrict.get(‘confirmPassword’).errors }}
{{ confirmPassword.hasError(‘notSame’) }}

En los ejemplos de Angular, muestran una forma que en mi caso (Angular 12) no funciona.

En la documentación de Angular no puedo encontrar un concepto satisfactorio de cómo manejar los retornos, ¿podrías explicarlo por favor?

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Para que devuelva “true” cuando las contraseñas no son iguales, debes asegurarte de que el error de validación “notSame” se esté activando correctamente en la función “pwdMatchValidator”. Según el código que has proporcionado, parece que el error “notSame” se devuelve correctamente si las contraseñas no coinciden.

    Para comprobar si se está activando el error de validación, puedes intentar agregar el siguiente código a tu plantilla:

    {{ restrict.get('confirmPassword').errors | json }}
    

    Esto mostrará el objeto de errores para el control de formulario “confirmPassword”, incluyendo cualquier error de validación que pueda estar presente. Si se está activando el error “notSame”, deberías ver algo como esto:

    {
      "notSame": true
    }
    

    Si no ves este objeto de error, podría indicar que la validación no está funcionando correctamente. En ese caso, puedes comprobar que la función “pwdMatchValidator” se esté llamando correctamente y que los valores de “pass” y “confirmPass” se estén estableciendo correctamente.

    En cuanto a la documentación de Angular, las clases “FormGroup” y “FormControl” ofrecen mucha flexibilidad para manejar la validación, y existen muchas formas diferentes de implementar la lógica de validación según tu caso de uso específico. La documentación incluye ejemplos de reglas de validación simples, así como escenarios más complejos con validadores personalizados y validación entre campos. Puede llevar tiempo familiarizarse con todas las opciones y APIs disponibles, pero una vez que entiendas los conceptos básicos, debería ser relativamente sencillo adaptar los ejemplos a tus necesidades específicas.

Comments are closed.