Diferencias

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

--- unidades:08_formularios:01_formularios [2014/08/27 17:28] – [FormController] admin
+++ 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 49: / Línea 50: @@
 class NgModelController {
+    String     $name
     boolean  $pristine
     boolean  $dirty
@@ Línea 100: / 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 110: / 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 130: / 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 147: / 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]]