formDirectiva AngularJS
Ejemplo
El "estado válido" de este formulario no se considerará "verdadero", siempre que el campo de entrada requerido esté vacío:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>
Definición y uso
AngularJS modifica el comportamiento predeterminado del <form>elemento.
Los formularios dentro de una aplicación AngularJS reciben ciertas propiedades. Estas propiedades describen el estado actual del formulario.
Los formularios tienen los siguientes estados:
$pristineNingún campo ha sido modificado todavía$dirtyUno o más han sido modificados$invalidEl contenido del formulario no es válido.$validEl contenido del formulario es válido.$submittedEl formulario se envía
El valor de cada estado representa un valor booleano y es true
o false.
Los formularios en AngularJS evitan la acción predeterminada, que es enviar el formulario al servidor, si no se especifica el atributo de acción.
Sintaxis
<form name="formname"></form>
Se hace referencia a los formularios utilizando el valor del atributo de nombre.
Clases CSS
Los formularios dentro de una aplicación AngularJS reciben ciertas clases . Estas clases se pueden utilizar para diseñar formularios según su estado.
Se añaden las siguientes clases:
ng-pristineNingún campo no ha sido modificado todavíang-dirtyUno o más campos han sido modificadosng-validEl contenido del formulario es válido.ng-invalidEl contenido del formulario no es válido.ng-valid-keyUna clave para cada validación. Ejemplo:ng-valid-required, útil cuando hay más de una cosa que se debe validarng-invalid-keyEjemplo:ng-invalid-required
Las clases se eliminan si el valor que representan es false.
Ejemplo
Aplique estilos para formularios no modificados (prístinos) y para formularios modificados:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>