¡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 formulario como en <input> tengan la propiedad name

Pasemos ahora a ver como se aplican cada una de ellas.

email

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

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

Ejemplo

Referencias

unidades/08_formularios/02_validaciones.1409172523.txt.gz · Última modificación: 2014/08/27 22:48 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