8.1 Formularios

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

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" >
       Nombre:<input type="text" ng-model="model.nombre" name="nombre" required >
       <br>
       Correo eletronico:<input type="text" ng-model="model.email" name="email" required>
     </form>

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

No es posible acceder a la propiedad del formulario hasta que no ha acabado la inicialización del controlador. Es decir que hasta que no se ha acabado de ejecutar la función del controlador no existe la propiedad.

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

¿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 lo que AngularJS dispone de las propiedades:

$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, si no 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”

Validez

Lo siguiente que podemos comprobar es si los valores del formulario o de algún campo son o no válidos ²⁾. Para ello AngularJS dispone de las siguientes propiedades:

$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 incumple alguna de las validaciones que se han indicado en los campos.

Como podemos imaginar $valid siempre vale lo contrario de $invalid 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.$valid`	Valdrá `true` si todas las validaciones de todos los campos del formulario “miFormulario” son válidas
`$scope.miFormulario.$invalid`	Valdrá `true` si alguna validación de alguno de los campos del formulario “miFormulario” es inválida
`$scope.miFormulario.nombre.$valid`	Valdrá `true` si todas las validaciones del campo “nombre” del formulario “miFormulario” son válidas
`$scope.miFormulario.nombre.$invalid`	Valdrá `true` si alguna validación del campo “nombre” del formulario “miFormulario” es inválida
`$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:

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

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.

Referencias

¹⁾

Su propiedad name

²⁾

En el siguiente tema ya veremos cómo hacer las validaciones y cuáles existen