| Ambos lados, revisión anteriorRevisión previaPróxima revisión | Revisión previa |
| unidades:08_formularios:02_validaciones [2014/08/27 22:59] – [novalidate] admin | unidades:08_formularios:02_validaciones [2014/09/16 21:01] (actual) – admin |
|---|
| ====== 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 |
| * ''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 ==== |
| |
| ==== 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> |
| </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> |
| |
| ==== 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> |
| </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> |
| |
| ==== 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> |
| </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> |
| </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 |
| |
| ===== 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 |
| === 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 |
| * 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 |
| 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 objeto, podrí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 |
| * 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 |
| |
| * 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 objeto, podríamos recorrer todas las propiedades para tener una lista de todo lo que está fallando.</note> |
| |
| ===== novalidate ===== | ===== novalidate ===== |
| |
| ===== 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]] |
