Diferencias

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

Enlace a la vista de comparación

unidades:08_formularios:01_formularios [2014/08/28 10:43]
admin [FormController]
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]]. ​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 105: Línea 105:
  
  
-  * 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 decirsi 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}}
unidades/08_formularios/01_formularios.txt · Última modificación: 2014/09/16 20:46 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0