Herramientas de usuario

Herramientas del sitio


unidades:08_formularios:01_formularios

¡Esta es una revisión vieja del documento!


8.1 Formularios

Cada formulario que creamos en una página HTML genera un objeto de la clase FormController en el $scope de nuestro controlador. Este objeto contiene el estado del formulario con información relativa a :

  • Si se ha modificado o no
  • Si son válidos sus campos o no.

Veamos ahora un diagrama UML con la clase FormController

FormControllerString $nameboolean $pristineboolean $dirtyboolean $validboolean $invalid_Error $errorNgModelController nombreCampo1NgModelController nombreCampo2NgModelController nombreCampo3NgModelController nombreCampoN NgModelControllerboolean $pristineboolean $dirtyboolean $validboolean $invalid_Validaciones $error_ErrorNgModelController[] validacion1NgModelController[] validacion2NgModelController[] validacion3NgModelController[] validacionN_Validacionesboolean validacion1boolean validacion2boolean validacion3boolean validacionNnombreCampo1, nombreCampo2, etc.Son los nombres de los campos del formulario.Ej. Es el atributo 'name' de un <input>validacion1, validacion2 , etc.son cada una de las validaciones queestán fallando a nivel de todo el formulario.De forma estándar sus posibles valores son:email, max, maxlength, min, minlength,number, pattern, required y urlvalidacion1, validacion2 , etc.son cada una de las validaciones quese están validando en ese control.De forma estándar sus posibles valores son:email, max, maxlength, min, minlength,number, pattern, required y url

  • Tanto la clase FormController como la clase 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.
  • La clase NgModelController no se verá en profundidad hasta la unidad 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.
  • Los nombres de clases de _Error '' y ''_Validaciones '' no son nombres que existan como tal en AngularJS pero los he creado para representar las forma de las propiedades ''FormController.$error y NgModelController.$error. Es decir que tienen esa información pero en ningún sitio de la documentación de AngularJS aparecen esos 2 nombres.

¿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.

En este tema vamos a poner ejemplo siguiendo el siguiente formulario:

     <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>

Ya iremos explicando los atributos a lo largo de la unidad.

Cambios

Lo primero que podemos saber del formulario es si algo se ha modificado, para ello AngularJS dispone de las propiedades:

  • $pristine: Vale true si el formulario aun no ha sido modificado por el usuario sino vale false.
  • $dirty: Vale true si el formulario ya ha sido modificado por el usuario sino vale false.

Como podemos imaginar $pristine siempre vale lo contrario de $dirty y viceversa.

Esta propiedad se puede aplicar tanto a nivel de formulario como a nivel de un campo concreto.

Ejemplo

Referencias

unidades/08_formularios/01_formularios.1409150874.txt.gz · Última modificación: por admin