inputDirectiva AngularJS
Ejemplo
Un campo de entrada con enlace de datos:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Definición y uso
AngularJS modifica el comportamiento predeterminado de los <input>elementos, pero solo si el ng-modelatributo está presente.
Proporcionan vinculación de datos, lo que significa que son parte del modelo AngularJS y se pueden consultar y actualizar tanto en las funciones de AngularJS como en el DOM.
Proporcionan validación. Ejemplo: un <input>elemento con un requiredatributo, tiene el $validestado establecido
falsemientras esté vacío.
También proporcionan control estatal. AngularJS mantiene el estado actual de todos los elementos de entrada.
Los campos de entrada tienen los siguientes estados:
$untouchedEl campo aún no ha sido tocado.$touchedEl campo ha sido tocado$pristineEl campo aún no ha sido modificado.$dirtyEl campo ha sido modificado.$invalidEl contenido del campo no es válido.$validEl contenido del campo es válido.
El valor de cada estado representa un valor booleano y es true
o false.
Sintaxis
<input ng-model="name">
Se hace referencia a los elementos de entrada mediante el valor del ng-modelatributo.
Clases CSS
<input>Los elementos dentro de una aplicación AngularJS reciben ciertas clases . Estas clases se pueden usar para diseñar elementos de entrada según su estado.
Se añaden las siguientes clases:
ng-untouchedEl campo aún no ha sido tocado.ng-touchedEl campo ha sido tocadong-pristineEl campo aún no ha sido modificado.ng-dirtyEl campo ha sido modificado.ng-validEl contenido del campo es válido.ng-invalidEl contenido del campo 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
Aplicar estilos para elementos de entrada válidos y no válidos, utilizando CSS estándar:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>