Instrucción form de AngularJS

Definición y uso

Modificación de AngularJS <form> Comportamiento por defecto del elemento.

Los formularios dentro de la aplicación AngularJS tienen ciertas propiedades. Estas propiedades describen el estado actual del formulario.

El formulario tiene los siguientes estados:

• $pristine No se ha modificado ningún campo
• $dirty Se han modificado uno o más campos
• $invalid El contenido del formulario es inválido
• $valid El contenido del formulario es válido
• $subscribed El formulario se ha enviado

Cada valor de estado representa un valor booleano, que es true o false.

Si no se especifica la propiedad action, el formulario de AngularJS bloqueará la acción por defecto, es decir, enviar el formulario al servidor.

Ejemplo

Ejemplo 1

Mientras que el campo de entrada requerido esté vacío, el "estado de validación" de este formulario no se considerará "true":

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>El estado de validación del formulario es:</p>
<h1>{{myForm.$valid}}</h1>

Intente hacerlo usted mismo

Ejemplo 2

Aplicar estilos a los formularios sin modificar (originales) y modificados:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>

Intente hacerlo usted mismo

Sintaxis

<form name="formname</form>

Al usar name El valor de la propiedad se usa para referirse al formulario.

Clases CSS

Los formularios dentro de la aplicación de AngularJS tienen algunas clases asignadas. Estas clases se pueden usar para establecer estilos de formulario según su estado.

Se han agregado las siguientes clases:

• ng-pristine No hay campos sin modificar
• ng-dirty Se han modificado uno o más campos
• ng-valid El contenido del formulario es válido
• ng-invalid El contenido del formulario es inválido
• ng-valid-key Verifica cada clave una vez. Por ejemplo:ng-valid-requiredes muy útil cuando hay más de un elemento que debe verificarse
• ng-invalid-key Por ejemplo:ng-invalid-required

Si el valor representado por la clase es falseSi se eliminan estos elementos, se eliminarán las clases correspondientes.