Introducción a Angular JS

Validación de formularios Más videos

Descripción del tema

Ya hemos creado un formulario para agregar o editar un bookmark en nuestra aplicación, en este tema veremos como validar lo que el usuario introduce, también desplegaremos mensajes de errores o warning usando Bootstrap.

Las validaciones en Angular JS son sencillas, simplemente usamos algunas directivas de Angular JS o también podemos usar las propiedades HTML5 y Angular se encargará de hacer las validaciones necesarias.

Lo primero que debemos hacer es asignar un nombre al formulario para poder usarlo en el template o en el controlador, esto es muy útil para poder desplegar errores de validaciones.

<form name="bookmarkForm" id="bookmarkForm">

Le vamos a asignar el nombre bookmarkForm, con esto es suficiente para accederlo desde el template.

Los campos requeridos son indispensables en cualquier aplicación, asignar esta validación es bastante sencillo, lo hacemos de la siguiente manera.

<input ng-model="bookmark.title" ng-required="true" name="title" id="title" class="form-control" type="text" placeholder="Enter the title">

Mediante la directiva ng-required hacemos que el campo título sea requerido, también podríamos usar la propiedad html5 required y angular automáticamente ejecutará la directiva ng-required sobre el campo.

Otro cambio importante es que hemos agregado el nombre al campo, name="title", esto es necesario para poder acceder a este input desde el template o en el controlador.

Ahora vamos a desplegar el mensaje de error, poner el campo de color rojo y desplegar un ícono en la parte derecha para indicar que el campo está incorrecto.

<div class="form-group" ng-class="{'has-error':bookmarkForm.title.$invalid && bookmarkForm.title.$dirty}">
  <label for="title">Title</label>
  <div class="input-group">
    <div class="input-group-addon">
      <i class="glyphicon glyphicon-bookmark"></i>
    </div>
    <input ng-model="bookmark.title" ng-required="true" name="title" id="title" class="form-control" type="text" placeholder="Enter the title">
    <span ng-if="bookmarkForm.title.$invalid && bookmarkForm.title.$dirty" class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
  <span ng-if="bookmarkForm.title.$invalid && bookmarkForm.title.$dirty" class="help-block">El título es requerido.</span>
</div>
  1. Primero agregamos la directiva ng-class para asignar la clase has-error, esta clase es definida por la librería de bootstrap y pinta el campo así como su contenido de color rojo. Dentro de la expresión verificamos que el campo título sea invalido y que esté sucio, si estas dos condiciones se cumplen entonces ha sucedido un error.
  2. El segundo cambio importante es que hemos agregado un ícono, este ícono lo desplegaremos usando exactamente la misma condición para la clase has-error, solo que aquí utilizaremos la directiva ng-if, esta directiva si la condición es true, entonces renderiza el nodo, de lo contrario no crea absolutamente nada.
  3. Por último hemos agregado el mensaje de error, usando la directa ng-if decidiremos si desplegar o no el mensaje. La expresión es la misma que hemos usado en las situaciones anteriores.

Si actualizamos nuestro navegador veremos algo como la siguiente imagen.

Validaciones en Angular JS

Validaciones en Angular JS

Vamos a hacer algo semejante para el campo de la URL, pero agregaremos algunas otras validaciones, para restringir el número mínimo y máximo de caracteres permitidos, el formato de la URL.

<div class="form-group" ng-class="{'has-error':bookmarkForm.url.$invalid && bookmarkForm.url.$touched}">
  <label for="url">URL</label>
  <div class="input-group">
    <div class="input-group-addon">
      <i class="glyphicon glyphicon-link"></i>
    </div>
    <input ng-model="bookmark.url" required minlength="3" maxlength="200" name="url" id="url" class="form-control" type="url" placeholder="Enter the URL">
    <span ng-if="bookmarkForm.url.$invalid && bookmarkForm.url.$dirty" class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
  <span ng-if="bookmarkForm.url.$error.required && bookmarkForm.url.$touched" class="help-block">La URL es requerida</span>
  <span ng-if="bookmarkForm.url.$error.minlength && bookmarkForm.url.$touched" class="help-block">La URL es muy pequeña</span>
  <span ng-if="bookmarkForm.url.$error.maxlength && bookmarkForm.url.$touched" class="help-block">La URL es muy larga</span>
  <span ng-if="bookmarkForm.url.$error.url && bookmarkForm.url.$touched" class="help-block">La URL no está en el formto correcto, ej: <strong>http://test.com</strong></span>
</div>
  1. Lo primero que hacemos es agregar la clase has-error de manera dinámica si ocurre algún error en la validación, lo interesante aquí es que en lugar de usar la propiedad $dirty, estamos usando una propiedad llama $touched, esta propiedad es introducida en Angular 1.3 y es true cuando el usuario le da foco al campo y luego blur, es decir, cuando toca el campo.
  2. En el input definimos el campo como required, un maxlenght y minlenght, estas son validaciones muy comunes.
  3. En tercer lugar agregamos el icono de error, exactamente igual como lo hicimos con el título.
  4. Ya que tenemos varias validaciones, necesitamos verificar cual de todas es la que está generando el error, es por eso que vamos a definir varios mensajes y en la condición usamos el objeto $error para verificar cual de todas las validaciones ha fallado.

Si probamos nuestra app, veremos que para el campo URL se muestran varios errores al mismo tiempo.

Validaciones en Angular JS

Varias validaciones en Angular JS

Como se puede observar, hemos agregado varias validaciones a un mismo campo, hemos usado los estilos y componentes de bootstrap para crear nuestro formulario.

En el siguiente tema veremos como hacer validaciones asíncronas, para verificar que el bookmark no exista previamente en la base de datos.

Te recomiendo subscribirte al canal de youtube donde voy subiendo los videos, si tienes alguna duda recuerda que puedes usar el foro y no olvides darle like al video en youtube, eso me ayudará mucho a seguir publicando mas contenido de manera gratuita.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Introducción a Angular JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

15Comentarios

  • Avatar-2 Jorge Armand Olivero 14/10/2014

    Muy bien, me a gustado ¿Una duda, como se haria para pasarle angular las validaciones que se hagan desde un servidor node?

    • Avatar-8 Crysfel Villa 15/10/2014

      Tendrías que recibir la respuesta del servidor (que contiene los errores de validación) y luego invocar la función $setValidity(validationErrorKey, isValid); desde tu controlador. Puedes revisar la documentación aquí: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$setValidity parece un tema interesante para este curso, solo que todavía no hemos visto como usar los servicios O.o Saludos

      • Avatar-5 Javier 10/01/2015

        Yo sinceramente no gastaría tiempo de respuesta en enviar validaciones desde el servidor, pienso que se gastan recursos y si tu app es grande, bueno la cosa empeora. Eso si, como tema para practicar suena genial, pero (y valga la redundancia) lo práctico de eso es casi nulo... desde mi punto de vista.

        • Avatar-12 Crysfel Villa 11/01/2015

          Hola Javier. Hacer validaciones en el servidor es MUY MUY importante! Nunca puedes confiar en ningún cliente, imagina que no utilizo la UI y simplemente hago un script que tire peticiones al API? me salto todas las validaciones del UI y podría comprometer tu sistema ;) Un Saludo

          • Avatar-3 Dannier Galicia 28/03/2015

            Buen punto Cysfel villa. Las validaciones siempre deben ir en ambos casos. En el servidor y en la vista

          • Avatar-12 sgrodriguez 23/10/2014

            Hola Crysfel, excelente curso, una consulta, las validaciones no se me activan si doy click sobre el botón "Save Changes", tengo que entrar a los campos para que me los valide, por qué pasa esto? Saludos

            • Avatar-11 Crysfel Villa 23/10/2014

              Buen punto! No se están marcando como inválidos porque las condiciones que pusimos en el template no se cumplen, para solucionar ese problema haremos una directiva ;)

            • Avatar-7 Dannier Galicia 28/03/2015

              No me funciono ng-if, en su lugar use ng-show para el caso de el mensaje de ayuda y el icono y funciono perfectamente

              • Avatar-12 Manu 13/05/2015

                Buenas! Muy buen trabajo estos cursos. Pero tengo una duda, he conseguido meter las validaciones bien, pero como hago para que no se pueda enviar el formulario sin que se cumplan las validaciones? Porque puedo crear un nuevo registro sin tener que validar nada, y mi intención es poner varios campos obligatorios. Se podría hacer con javascript pero hay alguna forma de hacerlo con Angular directamente? O uso la forma de toda la vida? Un Saludo!

                • Avatar-5 Luis 07/02/2017

                  2 años despues pero mejor tarde que nunca, podria hacerse deshabilitando el boton de guardar o save con la directiva ng-disable, tu botón quedaria algo asi Guardar cambios

                • Avatar-8 David Rodriguez 29/08/2015

                  Excelentes tutoriales, has sido de gran ayuda para aprender angularjs Tengo un detalle, ng-class funciona solo cuando no pongo condiciones como ng-class="'has-error'" Esto me funciona bien pero al momento de poner algo como: ng-class="{'has-error':addServiceForm.qty.$invalid && addServiceForm.qty.$dirty}" no me cambia la clase del div y este no se colorea rojo Alguna sugerencia? Gracias

                  • Avatar-7 Rodrigo Ibarra 05/10/2015

                    Hola buenas! Primero que nada felicidades por el excelente curso, mejor que uno de pago. Tengo una duda, el $touched no me funciona, incluso copiando el código, será por la versión de Angular?? Saludos!!

                    • Avatar-6 Crysfel Villa 05/10/2015

                      El $touched fue introducido en la versión 1.3.20, asegurate de usar una versión igual o superior a esa. Saludos

                    • Avatar-7 Diego Romero 22/12/2016

                      Buenas, muchas gracias por el curso. Tengo una duda, podría hacer las validaciones con el ng-model y no usar name o id?? Saludos

                      • Avatar-9 Laura Gomez 07/05/2017

                        El icono siempre me queda debajo, como puedo hacer para que quede dentro del input. Gracias

                        Instructor del curso

                        Crysfel3

                        Autor: Crysfel Villa

                        Ha participado en varios proyectos con Angular y es participante activo del grupo de Angular NYC.

                        Descarga video Descarga Código Fuente Ver Demostración

                        Regístrate a este curso

                        Este tutorial pertenece al curso Introducción a Angular JS, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                        Tendrás acceso a descargar los videos, códigos y material adicional.

                        Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                        Llevarás un registro de tu avance.