Partiendo de la aplicación de la entrada anterior, vamos a añadir al campo del correo electrónico la validación del formato, que se nos olvidó en la anterior entrada. Para eso nos copiamos una expresión regular que encontremos en internet y se la ponemos al campo del correo electrónico mediante el atributo "pattern":
Ahora, vamos a modificar el objeto "usuario" que utilizábamos en la anterior entrada para inicializar los campos del formulario. Ponemos todos los campos a null para que los campos empiecen vacíos:
Por último, vamos a añadir una validación más al campo del nombre, haciendo que necesite tener como mínimo 5 caracteres:
Ahora sí, vamos a empezar a mostrar los errores de validación al usuario.
Primero vamos a añadir al css del componente el siguiente código:
Como se puede ver, la modificación que hemos hecho es la siguiente: para todo elemento que tenga la clase css "ng-invalid" (que en el formulario sea inválido) y la clase "ng-touched" (que haya sido modificado) y que no sea el elemento formulario general (pues entonces afectará al formulario entero y no sólo a cada campo), se le pinta un borde de color rojo.
Ahora vamos a modificar en el html el campo del nombre de la siguiente forma:
Como se puede ver, primero hemos añadido una referencia al propio campo con la almohadilla, al que llamamos "nombre" y cuyo valor es "ngModel". Esto nos permite poder acceder a los valores de validación del campo en el formulario.
Después añadimos dos contenedores con los dos mensajes de error que vamos a mostrar dependiendo de la validación que esté fallando. A esos contenedores les añadimos la directiva "ngIf" para que se muestren sólo si en el formulario existe el error correspondiente (al hacer referencia a los campos del formulario con la almohadilla, tenemos acceso, dentro del objeto del formulario, a los posibles atributos de errores del propio campo).
Si arrancamos la aplicación, comprobamos que aparece en el nombre la validación de que el campo es requerido:
Si escribimos una letra en el campo, comprobamos que la validación de que el campo es requerido se cambia por la de que necesita 5 caracteres, además de pintar el borde del campo de color rojo:
Y si escribimos 5 caracteres o más, desaparece el error:
Y eso es todo. En la próxima entrada haremos lo mismo pero utilizando clases de Bootstrap, que quedará más bonito y elegante.
No hay comentarios:
Publicar un comentario