¡Esta es una revisión vieja del documento!


8.2 Validaciones

Acabamos de ver como 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 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

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

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

<input name="nombre">

<select name="nombre">

</note>

Pasemos ahora a ver como 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" >

==== max ==== Solo se aplica a <input> cuyo type=“number”. Deberemos indicar la directiva max=“valor”. Siendo valor el valor máximo que puede tener.

<input type="number" ng-model="model.edad" name="edad" max="99" >
==== maxlength ==== Solo 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.

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

==== min ==== Solo se aplica a <input> cuyo type=“number”.

Deberemos indicar la directiva min=“valor”. Siendo valor, el valor mínimo que puede tener.

<input type="number" ng-model="model.edad" name="edad" min="18" >
==== minlength ==== Solo 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.

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

==== number ==== Deberemos indicar en el <input> que type=“number”.

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

==== pattern ==== Solo 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

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

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

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

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

Y en $scope indicar lo siguiente:

$scope.patternNombre=/^[a-zA-Z]*$/;

==== 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.

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

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

Es este segundo ejemplo deberíamos tener en el $scope para que fuera requerido :

$scope.requeridoNombre=true
o para que no lo fuera:
$scope.requeridoNombre=false

==== url ==== Deberemos indicar en el <input> que type=“url”.

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

===== Comprobando las validaciones ===== Ahora que ya sabemos como 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 de required en el campo nombre del formulario miFormulario deberemos ver el valor de la siguiente expresión:

$scope.miFormulario.nombre.$error.required

  • 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 de required

=== Ejemplo 2 === Si queremos saber si ha fallado la validación de email en el campo correo del formulario miFormulario deberemos ver el valor de la siguiente expresión:

$scope.miFormulario.correo.$error.email

  • 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 NgModelController sobre los que podremos acceder a todas sus propiedades.

Gracias a que JavaScript permite saber que propiedades hay en un objeto podríamos recorrer todas las propiedades para tener una lista de todo lo que está fallando.

==== Sobre un tipo de validación ==== Podemos saber dado un tipo de validación cuantos campos no cumplen esa validación.Para explicarlo vamos a hacerlo con unos ejemplos:

=== Ejemplo 1 === Si queremos saber cuantos campos han fallado la validación de required del formulario miFormulario deberemos ver el valor de la siguiente expresión:

$scope.miFormulario.$error.required
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 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. Es nuestro ejemplo es que nadie ha puesto required en ningún campo.

=== Ejemplo 2 === Si queremos saber cuantos campos han fallado la validación de email del formulario miFormulario deberemos ver el valor de la siguiente expresión:

$scope.miFormulario.$error.email
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 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. Es nuestro ejemplo es que no hay campos del tipo type=“email”

Gracias a que JavaScript permite saber que propiedades hay en un objeto podríamos recorrer todas las propiedades para tener una lista de todo lo que está fallando.

===== 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.

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

Recuerda poner el atributo novalidate en el tag <form>.

===== Ejemplo =====

===== Referencias =====

unidades/08_formularios/02_validaciones.1409210291.txt.gz · Última modificación: 2014/08/28 09:18 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0