Tabla de Contenidos

8.1 Formularios

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

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:

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

PlantUML Graph

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

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 2). Para ello AngularJS dispone de las siguientes propiedades:

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

1) Su propiedad name
2) En el siguiente tema ya veremos cómo hacer las validaciones y cuáles existen