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>

FormController

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

SVG | PNG | TXT

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.

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 o campo aun no ha sido modificado por el usuario sino vale false.
$dirty: Vale true si el formulario o campo ya ha sido modificado por el usuario sino vale false.

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

Estas propiedades se pueden aplicar tanto a nivel de formulario como a nivel de un campo concreto.

Veamos ahora algunos ejemplos de ellas:

Expresión JavaScript	Significado
`$scope.miFormulario.$pristine`	Valdrá `true` si el usuario no ha modificado ningún campo del formulario “miFormulario”
`$scope.miFormulario.$dirty`	Valdrá `true` si el usuario ya ha modificado algún campo del formulario “miFormulario”
`$scope.miFormulario.nombre.$pristine`	Valdrá `true` si el usuario no ha modificado el campo “nombre” del formulario “miFormulario”
`$scope.miFormulario.nombre.$dirty`	Valdrá `true` si el usuario ya ha modificado el campo “nombre” del formulario “miFormulario”
`$scope.miFormulario.email.$pristine`	Valdrá `true` si el usuario no ha modificado el campo “email” del formulario “miFormulario”
`$scope.miFormulario.email.$dirty`	Valdrá `true` si el usuario ya ha modificado el campo “email” del formulario “miFormulario”

Ejemplo

Referencias

¹⁾

Su propiedad name