Curso de AngularJS y REST

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 8.2 Validaciones ======
Acabamos de ver cómo saber si un campo o formulario es o no válido. En este tema vamos a ver las validaciones estándar que tiene angular dejando para la unidad [[unidades:13_formulariosadv:00_start]] la creación de nuevas validaciones.

===== Tipos de Validaciones =====
AngularJs dispone de 9 tipos de validaciones distintas:
  * ''email'': El campo debe tener el formato de un correo electrónico
  * ''max'': El campo debe tener un valor máximo
  * ''maxlength'': El campo debe tener un nº máximo de caracteres
  * ''min'': El campo debe tener un valor mínimo
  * ''minlength'': El campo debe tener un nº mínimo de caracteres
  * ''number'': El campo debe ser un número
  * ''pattern'': El campo debe seguir una expresión regular
  * ''required'': el campo es requerido
  * ''url'': El campo debe tener el formato de una URL

<note warning>
Para que todas estas validaciones funcionen es necesario que tanto el ''<form>''como el ''<input>'', ''<select>'' , etc. tengan la propiedad ''name''.

<sxh html>
<form name="nombre">
</form>

<input name="nombre">

<select name="nombre">
</sxh>
</note>

Pasemos ahora a ver cómo se aplican cada una de ellas.

==== email ====
Deberemos indicar en el ''<input>'' que ''type="email"''.

<sxh html>
<input type="email" ng-model="model.correo" name="correo" >
</sxh>

==== max ====
Sólo se aplica a ''<input>'' cuyo  ''type="number"''.
Deberemos indicar la directiva ''max="valor"'', siendo ''valor'' el valor máximo que puede tener.

<sxh html>
<input type="number" ng-model="model.edad" name="edad" max="99" >
</sxh>
==== maxlength ====
Sólo se aplica a ''<input>'' cuyo  ''type="number"'' o ''type="text"''  o ''<textarea>''.
Deberemos indicar la directiva ''ng-maxlength="valor"'', siendo ''valor'' el tamaño máximo que puede tener en caracteres.

<sxh html>
<input type="text" ng-model="model.nombre" name="nombre" ng-maxlength="50" >
</sxh>

==== min ====
Sólo se aplica a ''<input>'' cuyo  ''type="number"''.

Deberemos indicar la directiva ''min="valor"'', siendo ''valor'' el valor mínimo que puede tener.

<sxh html>
<input type="number" ng-model="model.edad" name="edad" min="18" >
</sxh>
==== minlength ====
Sólo se aplica a ''<input>'' cuyo  ''type="number"'' o ''type="text"''  o ''<textarea>''.
Deberemos indicar la directiva ''ng-minlength="valor"'', siendo ''valor'' el tamaño mínimo que puede tener en caracteres.

<sxh html>
<input type="text" ng-model="model.nombre" name="nombre" ng-minlength="3" >
</sxh>

==== number ====
Deberemos indicar en el ''<input>'' que ''type="number"''.

<sxh html>
<input type="number" ng-model="model.edad" name="edad"  >
</sxh>

==== pattern ====
Sólo se aplica a ''<input>'' cuyo  ''type="number"'' , ''type="text"'' o ''type="email"''  o ''<textarea>''.
Deberemos indicar la directiva ''ng-pattern="valor"'', siendo ''valor'' la expresión regular que tiene que cumplir el valor.

<sxh html>
<input type="text" ng-model="model.nombre" name="nombre" ng-pattern="/^[a-zA-Z]*$/" >
</sxh>

<note important>
Recuerda que:
  * Hay que poner las barras al principio y al final
  * Si quieres que la expresión se aplique a todo el valor pon "^" al principio y "$" al final
</note>

Esta directiva permite que la expresión regular esté en una propiedad del ''$scope''. En ese caso se debe poner así:

<sxh html>
<input type="text" ng-model="model.nombre" name="nombre" ng-pattern="patternNombre" >
</sxh>

Y en ''$scope'' indicar lo siguiente:
<sxh js>
$scope.patternNombre=/^[a-zA-Z]*$/;
</sxh>

==== required ====
Se aplica a cualquier ''<input>'' , ''<select>'' o ''<textarea>''.

Se debe poner la directiva ''required'' o ''ng-required''.

La diferencia entre ellos es que al poner ''required'' el valor es requerido pero al poner ''ng-required'' se le podría poner un valor al atributo ''ng-required'' que fuera ''true'' o ''false'' pero que dicho valor venga del ''$scope''.

<sxh html>
<input type="text" ng-model="model.nombre" name="nombre" required >
</sxh>

<sxh html>
<input type="text" ng-model="model.nombre" name="nombre" ng-required="requeridoNombre" >
</sxh>

En este segundo ejemplo para que fuera requerido ''model.nombre'', deberíamos tener en el ''$scope'' :
<sxh js>
$scope.requeridoNombre=true
</sxh>

y para que **no** fuera requerido ''model.nombre'', deberíamos tener en el ''$scope'' :
<sxh js>
$scope.requeridoNombre=false
</sxh>

==== url ====
Deberemos indicar en el ''<input>'' que ''type="url"''.

<sxh html>
<input type="url" ng-model="model.sitioweb" name="sitioweb"  >
</sxh>

===== Comprobando las validaciones =====
Ahora que ya sabemos cómo poner las validaciones falta saber si una validación ha fallado. Hay dos formas de saberlo:
  * Sobre un campo
  * Sobre un tipo de validación

==== Sobre un campo ====
Si sabemos un campo, podemos averiguar las validaciones que ha fallado. Para explicarlo vamos a hacerlo con unos ejemplos:

=== Ejemplo 1 ===

Si queremos saber si ha fallado la validación ''required'' en el campo ''nombre'' del formulario ''miFormulario'' deberemos ver el valor de la siguiente expresión:
<sxh js>
$scope.miFormulario.nombre.$error.required
</sxh>

  * Si vale ''true'' es que la validación ha fallado y no está el valor
  * Si vale ''false'' es que la validación es correcta y tiene valor
  * Si vale ''undefined'' es que no se está validando la validación ''required''

=== Ejemplo 2 ===
Si queremos saber si ha fallado la validación ''email'' en el campo ''correo'' del formulario ''miFormulario'' deberemos ver el valor de la siguiente expresión:
<sxh js>
$scope.miFormulario.correo.$error.email
</sxh>

  * Si vale ''true'' es que la validación ha fallado y el valor no es un correo electrónico
  * Si vale ''false'' es que la validación es correcta y el valor es un correo electrónico
  * Si vale ''undefined'' es que no se está validando la validación de ''email''

Lo que nos retorna la expresión ''$scope.miFormulario.nombre'' o ''$scope.miFormulario.correo'' son objetos de tipo [[https://docs.angularjs.org/api/ng/type/ngModel.NgModelController|NgModelController]] sobre los que podremos acceder a todas sus propiedades.

<note tip>Gracias a que JavaScript permite saber qué propiedades hay en un objeto, podríamos recorrer todas las propiedades para tener una lista de todo lo que está fallando.</note>

==== Sobre un tipo de validación ====
Dado un tipo de validación podemos saber cuántos campos no cumplen esa validación.Para explicarlo vamos a hacerlo con unos ejemplos:

=== Ejemplo 1 ===
Si queremos saber cuántos campos han fallado la validación de ''required'' del formulario ''miFormulario'' deberemos ver el valor de la siguiente expresión:
<sxh js>
$scope.miFormulario.$error.required
</sxh>
El resultado es esta expresión 

  * Si vale ''false'' es que no hay ningún campo que incumpla dicha validación.
  * Si vale un array. El contenido del array son objetos de la clase [[https://docs.angularjs.org/api/ng/type/ngModel.NgModelController|NgModelController]] correspondientes a cada uno de los campos en los que ha fallado esa validación
  * Si vale ''undefined'' es que ningún campo está validando esa validación. En nuestro ejemplo es que nadie ha puesto ''required'' en ningún campo.

=== Ejemplo 2 ===
Si queremos saber cuántos campos han fallado la validación de ''email'' del formulario ''miFormulario'' deberemos ver el valor de la siguiente expresión:
<sxh js>
$scope.miFormulario.$error.email
</sxh>
El resultado es esta expresión 

  * Si vale ''false'' es que no hay ningún campo que incumpla dicha validación.
  * Si vale un array. El contenido del array son objetos de la clase [[https://docs.angularjs.org/api/ng/type/ngModel.NgModelController|NgModelController]] correspondientes a cada uno de los campos en los que ha fallado esa validación.
  * Si vale ''undefined'' es que ningún campo está validando esa validación. En nuestro ejemplo significaría que no hay campos del tipo ''type="email"''.

<note tip>Gracias a que JavaScript permite saber qué propiedades hay en un objeto, podríamos recorrer todas las propiedades para tener una lista de todo lo que está fallando.</note>

===== novalidate =====
Lo último que nos queda por contar es el atributo ''novalidate'' que debemos poner en el tag ''<form>''.

Este atributo se pone para evitar que el propio navegador se ponga a hacer sus propias validaciones con sus propios mensajes o estilos CSS y que choquen con las que está haciendo AngularJS.

<sxh html>
<form name="miFormulario" novalidate >
</form>
</sxh>

<note important>
Recuerda poner el atributo ''novalidate'' en el tag ''<form>''.
</note>
===== Ejemplo =====

{{url>http://embed.plnkr.co/AjSX2e}}

===== Referencias =====
  * [[https://docs.angularjs.org/api/ng/type/form.FormController|/ API Reference / ng / type / form.FormController]]
  * [[https://docs.angularjs.org/guide/forms|/ Developer Guide / Forms]]
  * [[https://docs.angularjs.org/api/ng/type/ngModel.NgModelController|/ API Reference / ng / type / ngModel.NgModelController]]