¡Esta es una revisión vieja del documento!
AngularJS permite saber de un formulario HTML la siguiente información:
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 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
Veamos ahora un diagrama UML donde se explican las distintas propiedades de la clase FormController
_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 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” |