Partimos de la aplicación de la entrada anterior.
Si entramos en la web de Bootstrap y buscamos por "Validation", nos aparecerá toda la documentación al respecto:
Lo interesante es leer toda la información, pero vamos a hacerlo aquí de forma resumida.
Vamos a modificar el campo del nombre del formulario como sigue:
Como se puede ver, al propio campo del nombre le estamos añadiendo con Angular la directiva "ngClass", para que se le aplique la clase "is-invalid" (colorea de rojo el borde) cuando el campo sea inválido y se haya tocado, y la clase "is-valid" (colorea el borde de verde y el fondo de amarillo) cuando el campo sea válido y se haya tocado.
También se ha añadido la clase "invalid-feedback" (colorea de rojo el texto) a los contenedores de mensajes de error.
Tendríamos que hacer lo mismo con los otros dos campos y simplemente con esas modificaciones habríamos terminado el cambio.
Vamos a hacer una última validación que no hicimos en la anterior entrada. Vamos a tener deshabilitado el botón de guardar el formulario hasta que todos los campos del formulario sean válidos. Para eso, modificamos el código del botón de la siguiente forma:
Como se puede ver, sólo hemos añadido el atributo "disabled" mientras que el formulario no sea válido.
Ahora arrancamos la aplicación y comprobamos que los campos están en blanco (sin rojo de inválido ni verde de válido) porque aún no se han tocado, y que el botón de guardar está deshabilitado:
Ahora hacemos click en el campo del nombre y salimos haciendo click fuera, y nos muestra el mensaje de error en rojo, al igual que el borde del campo:
Si rellenamos todos los campos correctamente, comprobamos que se nos van poniendo con borde verde y fondo amarillo, y que el botón de guardar ya se encuentra habilitado:
Y eso es todo.
No hay comentarios:
Publicar un comentario