8.1 Formularios

AngularJS permite saber de un formulario HTML la siguiente información:

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

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

Para acceder a la información que proporciona AngularJS sobre el formulario HTML tenemos la clase 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 ¹⁾ del formulario HTML y que es una instancia de la clase FormController

La forma de hacerlo en el ejemplo sería la siguiente:

var formController=$scope.miFormulario

Veamos ahora un diagrama UML donde se explican las distintas propiedades de la clase FormController

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

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.

• / API Reference / ng / type / form.FormController
• / Developer Guide / Forms