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.

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.

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!