Curso de AngularJS y REST

Herramientas de usuario

Herramientas del sitio

Traza:
unidades:08_formularios:02_validaciones

Diferencias

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

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
Próxima revisión		Revisión previa
unidades:08_formularios:02_validaciones [2014/08/27 20:28] – [email] adminunidades: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 14: Línea 14:
   * ''url'': El campo debe tener el formato de una URL   * ''url'': El campo debe tener el formato de una URL
  
-<note warning>Para que todas estas validaciones funcionen es necesario que tanto el formulario como en ''<input>'' tengan la propiedad ''name''</note>+<note warning> 
 +Para que todas estas validaciones funcionen es necesario que tanto el ''<form>''como el ''<input>'', ''<select>'' , etc. tengan la propiedad ''name''.
  
-Pasemos ahora a ver como se aplican cada una de ellas.+<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 ==== ==== email ====
Línea 26: 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 33: Línea 44:
 </sxh> </sxh>
 ==== maxlength ==== ==== maxlength ====
-Solo se aplica a ''<input>'' cuyo  ''type="number"'' o ''type="text"''. +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 41: 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 49: Línea 60:
 </sxh> </sxh>
 ==== minlength ==== ==== minlength ====
-Solo se aplica a ''<input>'' cuyo  ''type="number"'' o ''type="text"''. +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 64: Línea 75:
  
 ==== pattern ==== ==== pattern ====
-Solo se aplica a ''<input>'' cuyo  ''type="number"'' , ''type="text"'' o ''type="email"''. +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 77: 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 89: Línea 100:
  
 ==== required ==== ==== required ====
-Se aplica a cualquier ''<input>''.+Se aplica a cualquier ''<input>'' , ''<select>'' o ''<textarea>''.
  
 Se debe poner la directiva ''required'' o ''ng-required''. Se debe poner la directiva ''required'' o ''ng-required''.
Línea 103: 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>
-o para que no lo fuera:+ 
 +y 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 119: Línea 131:
 </sxh> </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 ===== ===== Ejemplo =====
  
Línea 124: Línea 209:
  
 ===== Referencias ===== ===== 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]]
unidades/08_formularios/02_validaciones.1409164088.txt.gz · Última modificación: por admin