Muestra las diferencias entre dos versiones de la página.
unidades:08_formularios:01_formularios [2014/08/27 18:10] admin [8.1 Formularios] |
unidades:08_formularios:01_formularios [2014/09/16 20:46] (actual) admin |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
====== 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. | ||
Línea 19: | Línea 19: | ||
===== 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: | ||
Línea 50: | Línea 50: | ||
class NgModelController { | class NgModelController { | ||
+ | String $name | ||
boolean $pristine | boolean $pristine | ||
boolean $dirty | boolean $dirty | ||
Línea 101: | Línea 102: | ||
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. | ||
Línea 111: | Línea 111: | ||
- | ¿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. | ||
Línea 131: | Línea 131: | ||
===== 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. | ||
Línea 156: | Línea 156: | ||
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}} |