Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

unidades:08_formularios:02_validaciones [2014/08/28 09:18]
admin [Tipos de Validaciones]
unidades:08_formularios:02_validaciones [2014/09/16 21:01] (actual)
admin
Línea 1: Línea 1:
 ====== 8.2 Validaciones ====== ====== 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 [[unidades:​13_formulariosadv:​00_start]] la creación de nuevas 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 ===== ===== Tipos de Validaciones =====
 AngularJs dispone de 9 tipos de validaciones distintas: AngularJs dispone de 9 tipos de validaciones distintas:
-  * ''​email'':​ El campo debe tener el formato de un correo electrónico.+  * ''​email'':​ El campo debe tener el formato de un correo electrónico
   * ''​max'':​ El campo debe tener un valor máximo   * ''​max'':​ El campo debe tener un valor máximo
   * ''​maxlength'':​ El campo debe tener un nº máximo de caracteres   * ''​maxlength'':​ El campo debe tener un nº máximo de caracteres
Línea 15: Línea 15:
  
 <note warning> <note warning>
-Para que todas estas validaciones funcionen es necesario que tanto el ''<​form>''​como el''<​input>'',​ ''<​select>''​ , etc. tengan la propiedad ''​name''​+Para que todas estas validaciones funcionen es necesario que tanto el ''<​form>''​como el ''<​input>'',​ ''<​select>''​ , etc. tengan la propiedad ''​name''​.
  
 <sxh html> <sxh html>
Línea 24: Línea 24:
  
 <select name="​nombre">​ <select name="​nombre">​
 +</​sxh>​
 </​note>​ </​note>​
  
-Pasemos ahora a ver como se aplican cada una de ellas.+Pasemos ahora a ver cómo se aplican cada una de ellas.
  
 ==== email ==== ==== email ====
Línea 37: Línea 37:
  
 ==== max ==== ==== max ====
-Solo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​. +Sólo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​. 
-Deberemos indicar la directiva ''​max="​valor"''​. Siendo ​''​valor''​ el valor máximo que puede tener.+Deberemos indicar la directiva ''​max="​valor"''​, siendo ​''​valor''​ el valor máximo que puede tener.
  
 <sxh html> <sxh html>
Línea 44: Línea 44:
 </​sxh>​ </​sxh>​
 ==== maxlength ==== ==== maxlength ====
-Solo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​ o ''​type="​text"'' ​ o ''<​textarea>''​. +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.+Deberemos indicar la directiva ''​ng-maxlength="​valor"''​, siendo ​''​valor''​ el tamaño máximo que puede tener en caracteres.
  
 <sxh html> <sxh html>
Línea 52: Línea 52:
  
 ==== min ==== ==== min ====
-Solo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​.+Sólo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​.
  
-Deberemos indicar la directiva ''​min="​valor"''​. Siendo ​''​valor''​el valor mínimo que puede tener.+Deberemos indicar la directiva ''​min="​valor"''​, siendo ​''​valor''​ el valor mínimo que puede tener.
  
 <sxh html> <sxh html>
Línea 60: Línea 60:
 </​sxh>​ </​sxh>​
 ==== minlength ==== ==== minlength ====
-Solo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​ o ''​type="​text"'' ​ o ''<​textarea>''​. +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.+Deberemos indicar la directiva ''​ng-minlength="​valor"''​, siendo ​''​valor''​ el tamaño mínimo que puede tener en caracteres.
  
 <sxh html> <sxh html>
Línea 75: Línea 75:
  
 ==== pattern ==== ==== pattern ====
-Solo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​ , ''​type="​text"''​ o ''​type="​email"'' ​ o ''<​textarea>''​. +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+Deberemos indicar la directiva ''​ng-pattern="​valor"''​, siendo ​''​valor''​ la expresión regular que tiene que cumplir el valor.
  
 <sxh html> <sxh html>
Línea 88: Línea 88:
 </​note>​ </​note>​
  
-Esta directiva permite que la expresión regular esté en una propiedad del ''​$scope'' ​en ese caso se debe poner así:+Esta directiva permite que la expresión regular esté en una propiedad del ''​$scope''​. En ese caso se debe poner así:
  
 <sxh html> <sxh html>
Línea 114: Línea 114:
 </​sxh>​ </​sxh>​
  
-Es este segundo ejemplo deberíamos tener en el ''​$scope'' ​para que fuera requerido ​:+En este segundo ejemplo ​para que fuera requerido ''​model.nombre'', ​deberíamos tener en el ''​$scope''​ :
 <sxh js> <sxh js>
 $scope.requeridoNombre=true $scope.requeridoNombre=true
 </​sxh>​ </​sxh>​
-para que no lo fuera:+ 
 +para que **no** fuera requerido ''​model.nombre'',​ deberíamos tener en el ''​$scope'' ​:
 <sxh js> <sxh js>
 $scope.requeridoNombre=false $scope.requeridoNombre=false
Línea 131: Línea 132:
  
 ===== Comprobando las validaciones ===== ===== Comprobando las validaciones =====
-Ahora que ya sabemos ​como poner las validaciones falta saber si una validación ha fallado. Hay dos formas de saberlo:+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 campo
   * Sobre un tipo de validación   * Sobre un tipo de validación
Línea 140: Línea 141:
 === Ejemplo 1 === === 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:+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> <sxh js>
 $scope.miFormulario.nombre.$error.required $scope.miFormulario.nombre.$error.required
Línea 147: Línea 148:
   * Si vale ''​true''​ es que la validación ha fallado y no está el valor   * 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 ''​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''​+  * Si vale ''​undefined''​ es que no se está validando la validación ''​required''​
  
 === Ejemplo 2 === === 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:+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> <sxh js>
 $scope.miFormulario.correo.$error.email $scope.miFormulario.correo.$error.email
Línea 161: Línea 162:
 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. 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 que propiedades hay en un objeto podríamos recorrer todas las propiedades para tener una lista de todo lo que está fallando.</​note>​+<note tip>​Gracias a que JavaScript permite saber qué propiedades hay en un objetopodríamos recorrer todas las propiedades para tener una lista de todo lo que está fallando.</​note>​
  
 ==== Sobre un tipo de validación ==== ==== 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:+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 === === 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:+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> <sxh js>
 $scope.miFormulario.$error.required $scope.miFormulario.$error.required
Línea 175: Línea 176:
   * Si vale ''​false''​ es que no hay ningún campo que incumpla dicha validació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 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. ​Es nuestro ejemplo es que nadie ha puesto ''​required''​ en ningún campo.+  * 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 === === 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:+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> <sxh js>
 $scope.miFormulario.$error.email $scope.miFormulario.$error.email
Línea 185: Línea 186:
  
   * Si vale ''​false''​ es que no hay ningún campo que incumpla dicha validació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 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. ​Es nuestro ejemplo ​es que no hay campos del tipo ''​type="​email"''​+  * 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 que propiedades hay en un objeto podríamos recorrer todas las propiedades para tener una lista de todo lo que está fallando.</​note>​+<note tip>​Gracias a que JavaScript permite saber qué propiedades hay en un objetopodríamos recorrer todas las propiedades para tener una lista de todo lo que está fallando.</​note>​
  
 ===== novalidate ===== ===== novalidate =====
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