Diferencias

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

--- unidades:08_formularios:01_formularios [2014/08/27 17:27]
admin [Cambios]
+++ unidades:08_formularios:01_formularios [2014/09/16 20:46] (actual)
admin
@@ Línea 1: / Línea 1: @@
 ====== 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.
 En este tema vamos a poner ejemplo siguiendo el siguiente formulario 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 ng-maxlength="10">
        <br>
-       Correo eletronico:<input type="email" ng-model="model.email" name="email">
+       Correo eletronico:<input type="text" ng-model="model.email" name="email" required>
-       <br>
-       <input type="checkbox" ng-model="model.aceptaTerminosCondiciones" name="aceptaTerminosCondiciones">Acepta los Terminos y Condiciones
      </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]]. 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:
@@ Línea 25: / Línea 26: @@
 </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]]
@@ Línea 45: / Línea 50: @@
 class NgModelController {
+    String     $name
     boolean  $pristine
     boolean  $dirty
@@ Línea 96: / 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 106: / 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 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.
@@ Línea 126: / Línea 131: @@
 ===== 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.
@@ Línea 143: / Línea 148: @@
 | ''$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.1409153229.txt.gz · Última modificación: 2014/08/27 17:27 por admin

Ir hasta arriba