| Ambos lados, revisión anteriorRevisión previaPróxima revisión | Revisión previa |
| unidades:08_formularios:01_formularios [2014/08/27 18:09] – [Ejemplo] admin | unidades:08_formularios:01_formularios [2014/09/16 20:46] (actual) – admin |
|---|
| ====== 8.1 Formularios ====== | ====== 8.1 Formularios ====== |
| AngularJS permite saber de un formulario HTML la siguiente información: | AngularJS permite saber la siguiente información de un formulario HTML: |
| * Si se ha modificado o no | * Si se ha modificado o no. |
| * Si son válidos sus campos o no. | * Si son válidos sus campos o no. |
| |
| En este tema vamos a poner ejemplo siguiendo el siguiente formulario HTML: | En este tema vamos a poner ejemplo siguiendo el siguiente formulario HTML: |
| <sxh html> | <sxh html> |
| <form name="miFormulario" novalidate> | <form name="miFormulario" > |
| Nombre:<input type="text" ng-model="model.nombre" name="nombre" required > | Nombre:<input type="text" ng-model="model.nombre" name="nombre" required > |
| <br> | <br> |
| |
| ===== FormController ===== | ===== FormController ===== |
| Para acceder a la información que proporciona AngularJS sobre el formulario HTML tenemos la clase [[https://docs.angularjs.org/api/ng/type/form.FormController|FormController]]. Se accede a la instancia de esta clase a través del ''$scope'' de nuestro controlador. El ''$scope'' tiene una propiedad que se llama como el nombre ((Su propiedad name)) del formulario HTML y que es una instancia de la clase [[https://docs.angularjs.org/api/ng/type/form.FormController|FormController]] | Para acceder a la información que proporciona AngularJS sobre el formulario HTML tenemos la clase [[https://docs.angularjs.org/api/ng/type/form.FormController|FormController]]. A la instancia de esta clase se accede a través del ''$scope'' de nuestro controlador. El ''$scope'' tiene una propiedad que se llama como el nombre ((Su propiedad name)) del formulario HTML y que es una instancia de la clase [[https://docs.angularjs.org/api/ng/type/form.FormController|FormController]] |
| |
| La forma de hacerlo en el ejemplo sería la siguiente: | La forma de hacerlo en el ejemplo sería la siguiente: |
| |
| class NgModelController { | class NgModelController { |
| | String $name |
| boolean $pristine | boolean $pristine |
| boolean $dirty | boolean $dirty |
| NgModelController --> _Validaciones | NgModelController --> _Validaciones |
| FormController --> _Error | FormController --> _Error |
| |
| </uml> | </uml> |
| |
| |
| * Tanto la clase [[https://docs.angularjs.org/api/ng/type/form.FormController|FormController]] como la clase [[https://docs.angularjs.org/api/ng/type/ngModel.NgModelController|NgModelController]] disponen de mas propiedades y/o métodos, algunos de los cuales se verán en otras unidades y algunos otros no se verán en este curso. | * Tanto la clase [[https://docs.angularjs.org/api/ng/type/form.FormController|FormController]] como la clase [[https://docs.angularjs.org/api/ng/type/ngModel.NgModelController|NgModelController]] disponen de más propiedades y/o métodos, algunos de los cuales se verán en otras unidades y algunos otros no los veremos en este curso. |
| * La clase [[https://docs.angularjs.org/api/ng/type/ngModel.NgModelController|NgModelController]] no se verá en profundidad hasta la unidad [[unidades:13_formulariosadv:00_start]] ya que es necesario tener conocimientos avanzados de directivas para comprenderla completamente. | * La clase [[https://docs.angularjs.org/api/ng/type/ngModel.NgModelController|NgModelController]] no se verá en profundidad hasta la unidad [[unidades:13_formulariosadv:00_start]] ya que es necesario tener conocimientos avanzados de directivas para comprenderla completamente. |
| * Durante esta unidad vamos a ir explicando cada una de las propiedades de estas clases. | * Durante esta unidad vamos a ir explicando cada una de las propiedades de estas clases. |
| |
| |
| ¿Que vamos a conseguir con este pequeño monstruo de clase enrevesadas? Como ya hemos dicho, poder saber en todo momento el estado del formulario y de todos sus campos. | ¿Qué vamos a conseguir con este pequeño monstruo de clase enrevesadas? Como ya hemos dicho, poder saber en todo momento el estado del formulario y de todos sus campos. |
| ===== Cambios ===== | ===== Cambios ===== |
| Lo primero que podemos saber del formulario es si algo se ha modificado en los campos del formulario, para ello AngularJS dispone de las propiedades: | Lo primero que podemos saber del formulario es si algo se ha modificado en los campos del formulario, para lo que AngularJS dispone de las propiedades: |
| * ''$pristine'': Vale ''true'' si el formulario o campo aun no ha sido modificado por el usuario, sino vale ''false''. | * ''$pristine'': Vale ''true'' si el formulario o campo aún no ha sido modificado por el usuario, si no vale ''false''. |
| * ''$dirty'': Vale ''true'' si el formulario o campo ya ha sido modificado por el usuario, sino vale ''false''. | * ''$dirty'': Vale ''true'' si el formulario o campo ya ha sido modificado por el usuario, si no vale ''false''. |
| |
| Como podemos imaginar ''$pristine'' siempre vale lo contrario de ''$dirty'' y viceversa. | Como podemos imaginar ''$pristine'' siempre vale lo contrario de ''$dirty'' y viceversa. |
| |
| ===== Validez ===== | ===== Validez ===== |
| Lo siguiente que podemos comprobar es si los valores del formulario o de algún campo son o no válidos ((En el siguiente tema ya veremos como hacer las validaciones y cuales existen)), para ello AngularJS dispone de las siguientes propiedades: | Lo siguiente que podemos comprobar es si los valores del formulario o de algún campo son o no válidos ((En el siguiente tema ya veremos cómo hacer las validaciones y cuáles existen)). Para ello AngularJS dispone de las siguientes propiedades: |
| * ''$valid'' : Vale ''true'' si el formulario o el campo son válidos. Es decir cumplen todas las validaciones que se han indicado en los campos. | * ''$valid'' : Vale ''true'' si el formulario o el campo son válidos, es decir, si cumplen todas las validaciones que se han indicado en los campos. |
| * ''$invalid'' : Vale ''true'' si el formulario o el campo son inválidos. Es decir si se incumplen alguna de las validaciones que se han indicado en los campos. | * ''$invalid'' : Vale ''true'' si el formulario o el campo son inválidos, es decir, si se incumple alguna de las validaciones que se han indicado en los campos. |
| |
| Como podemos imaginar ''$valid'' siempre vale lo contrario de ''$invalid'' y viceversa. | Como podemos imaginar ''$valid'' siempre vale lo contrario de ''$invalid'' y viceversa. |
| | ''$scope.miFormulario.email.$valid'' | Valdrá ''true'' si todas las validaciones del campo "email" del formulario "miFormulario" son válidas | | | ''$scope.miFormulario.email.$valid'' | Valdrá ''true'' si todas las validaciones del campo "email" del formulario "miFormulario" son válidas | |
| | ''$scope.miFormulario.email.$invalid'' | Valdrá ''true'' si alguna validación del campo "email" del formulario "miFormulario" es inválida | | | ''$scope.miFormulario.email.$invalid'' | Valdrá ''true'' si alguna validación del campo "email" del formulario "miFormulario" es inválida | |
| |
| ===== novalidate ===== | |
| |
| |
| Nombre:<input type="text" ng-model="model.nombre" name="nombre" required > | Nombre:<input type="text" ng-model="model.nombre" name="nombre" required > |
| <br> | <br> |
| Correo eletronico:<input type="text" ng-model="model.email" name="email" required> | Correo electrónico:<input type="text" ng-model="model.email" name="email" required> |
| </form> | </form> |
| </sxh> | </sxh> |
| |
| En el que los campos "nombre" y "email" son requeridos. Se puede ver el estado de todas las variable ''$pristine'', ''$dirty'', ''$valid'' y ''$invalid'' a medida que se cambian los datos del formulario | En el que los campos "nombre" y "email" son requeridos. Se puede ver el estado de todas las variable ''$pristine'', ''$dirty'', ''$valid'' y ''$invalid'' a medida que se cambian los datos del formulario. |
| |
| {{url>http://embed.plnkr.co/CbzFFaBBRAfkqrStbqMU}} | {{url>http://embed.plnkr.co/CbzFFaBBRAfkqrStbqMU}} |
