textareaDirectiva AngularJS
Ejemplo
Un área de texto con enlace de datos:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Definición y uso
AngularJS modifica el comportamiento predeterminado de los <textarea>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 <textarea>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 área de texto.
Los campos de área de texto 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 cualquiera true
de false.
Sintaxis
<textarea ng-model="name"></textarea>
Se hace referencia a los elementos de área de texto utilizando el valor del ng-modelatributo.
Clases CSS
<textarea>Los elementos dentro de una aplicación AngularJS reciben ciertas clases . Estas clases se pueden usar para diseñar elementos de área de texto 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
Aplique estilos para elementos de área de texto válidos y no válidos, utilizando CSS estándar:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>