Diferencias

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

--- unidades:08_formularios:01_formularios [2014/08/27 16:44]
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 ======
-Cada formulario que creamos en una página HTML genera un objeto de la clase [[https://docs.angularjs.org/api/ng/type/form.FormController|FormController]] en el ''$scope'' de nuestro controlador. Este objeto contiene el estado del formulario con información relativa a :
+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.
-Veamos ahora un diagrama UML con la clase [[https://docs.angularjs.org/api/ng/type/form.FormController|FormController]]
+En este tema vamos a poner ejemplo siguiendo el siguiente formulario HTML:
+<sxh html>
+     <form name="miFormulario" >
+       Nombre:<input type="text" ng-model="model.nombre" name="nombre" required >
+       <br>
+       Correo eletronico:<input type="text" ng-model="model.email" name="email" required>
+     </form>
+</sxh>
+Este formulario contiene 2 validaciones:
+  * El campo "nombre" es requerido
+  * El campo "email" es requerido
+===== 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:
+<sxh js>
+var formController=$scope.miFormulario
+</sxh>
+<note warning>
+No es posible acceder a la propiedad del formulario hasta que no ha acabado la inicialización del controlador. Es decir que hasta que no se ha acabado de ejecutar la función del controlador no existe la propiedad.
+</note>
+Veamos ahora un diagrama UML donde se explican las distintas propiedades de la clase [[https://docs.angularjs.org/api/ng/type/form.FormController|FormController]]
 <uml>
@@ Línea 23: / Línea 50: @@
 class NgModelController {
+    String     $name
     boolean  $pristine
     boolean  $dirty
@@ Línea 74: / Línea 102: @@
 NgModelController --> _Validaciones
 FormController  --> _Error
 </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.
   * Durante esta unidad vamos a ir explicando cada una de las propiedades de estas clases.
@@ Línea 84: / 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 =====
+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 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, si no vale ''false''.
-En este tema vamos a poner ejemplo siguiendo el siguiente formulario:
+Como podemos imaginar ''$pristine'' siempre vale lo contrario de ''$dirty'' y viceversa.
-<sxh html>
-     <form name="miFormulario" novalidate>
-       Nombre:<input type="text" ng-model="model.nombre" name="nombre" required ng-maxlength="10">
-       <br>
-       Correo eletronico:<input type="email" ng-model="model.email" name="email">
-       <br>
-       <input type="checkbox" ng-model="model.aceptaTerminosCondiciones" name="aceptaTerminosCondiciones">Acepta los Terminos y Condiciones
-     </form>
-</sxh>
-Ya iremos explicando los atributos a lo largo de la unidad.
+Estas propiedades se pueden aplicar tanto a nivel de formulario como a nivel de un campo concreto.
-===== Cambios =====
-Lo primero que podemos saber
+Veamos ahora algunos ejemplos de ellas:
+^ Expresión JavaScript  ^ Significado ^
+| ''$scope.miFormulario.$pristine'' | Valdrá ''true'' si el usuario no ha modificado ningún campo del formulario "miFormulario" |
+| ''$scope.miFormulario.$dirty'' | Valdrá ''true'' si el usuario ya ha modificado algún campo del formulario "miFormulario" |
+| ''$scope.miFormulario.nombre.$pristine'' | Valdrá ''true'' si el usuario no ha modificado el campo "nombre" del formulario "miFormulario" |
+| ''$scope.miFormulario.nombre.$dirty'' | Valdrá ''true'' si el usuario ya ha modificado el campo "nombre" del formulario "miFormulario" |
+| ''$scope.miFormulario.email.$pristine'' | Valdrá ''true'' si el usuario no ha modificado el campo "email" del formulario "miFormulario" |
+| ''$scope.miFormulario.email.$dirty'' | Valdrá ''true'' si el usuario ya ha modificado el campo "email" del formulario "miFormulario" |
+===== 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 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, 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 incumple alguna de las validaciones que se han indicado en los campos.
+Como podemos imaginar ''$valid'' siempre vale lo contrario de ''$invalid'' y viceversa.
-===== Ejemplo =====
+Estas propiedades se pueden aplicar tanto a nivel de formulario como a nivel de un campo concreto.
+Veamos ahora algunos ejemplos de ellas:
+^ Expresión JavaScript  ^ Significado ^
+| ''$scope.miFormulario.$valid'' | Valdrá ''true'' si todas las validaciones de todos los campos  del formulario "miFormulario" son válidas |
+| ''$scope.miFormulario.$invalid'' | Valdrá ''true'' si alguna validación de alguno de los campos del formulario "miFormulario" es inválida |
+| ''$scope.miFormulario.nombre.$valid'' | Valdrá ''true'' si todas las validaciones del campo "nombre" del formulario "miFormulario" son válidas |
+| ''$scope.miFormulario.nombre.$invalid'' | Valdrá ''true'' si alguna validación del campo "nombre" del formulario "miFormulario" es inválida |
+| ''$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 |
+===== Ejemplo =====
+El ejemplo contiene el siguiente formulario:
+<sxh html>
+     <form name="miFormulario" novalidate>
+       Nombre:<input type="text" ng-model="model.nombre" name="nombre" required >
+       <br>
+       Correo electrónico:<input type="text" ng-model="model.email" name="email" required>
+     </form>
+</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.
+{{url>http://embed.plnkr.co/CbzFFaBBRAfkqrStbqMU}}
 ===== 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/01_formularios.1409150673.txt.gz · Última modificación: 2014/08/27 16:44 por admin

Ir hasta arriba