Siguiendo con la entrada anterior, lo primero que vamos a hacer es añadir en el html al final del formulario el valor del atributo "valid" del objeto "formulario", para ir comprobando en tiempo real cuándo se cumplen todas las validaciones:
Ahora modificamos el constructor del componente como sigue:
Como se puede ver, hemos modificado el constructor FormControl de cada campo, añadiendo un segundo parámetro.
Como vimos en la anterior entrada, el primer parámetro (que en este caso dejamos vacío para los tres campos) sirve para darle un valor por defecto al campo. El segundo parámetro sirve para añadir validaciones síncronas, y el tercer parámetro (que no utilizamos aquí) sirve para añadir validaciones asíncronas.
Lo que hemos hecho es añadir el segundo parámetro a los tres campos, indicando que los tres campos deben ser requeridos, y que el campo del correo además debe cumplir con la validación de formato de correo electrónico.
Ahora si arrancamos la aplicación, comprobamos que el formulario no pasa a ser válido hasta que informamos los tres campos y además el del correo cumple con el patrón de correo electrónico:
Ahora vamos a hacer, como ya hicimos en el caso de la validación por template, que se muestren los errores por pantalla al usuario.
Para ello modificamos el campo nombre del html como sigue:
Como se puede ver, lo que hemos hecho es muy parecido a lo que hicimos en el caso de la validación por template.
En primer lugar añadimos la directiva ngClass al propio campo de texto, para que utilice las clases de Bootstrap y que pinte el borde del campo de verde o de rojo dependiendo si el campo es válido o no.
En segundo lugar añadimos un contenedor con un mensaje de que el campo es requerido, con la directiva ngIf para que se muestre sólo si el campo no cumple la validación de ser requerido.
Hacemos lo mismo para los campos de apellido y correo, sin olvidar que para el campo del correo electrónico tenemos que crear dos mensajes, uno para indicar que el mensaje es requerido y otro de que no cumple el formato de correo electrónico:
A continuación arrancamos la aplicación, y podemos comprobar que funciona correctamente:
Y eso es todo.
No hay comentarios:
Publicar un comentario