Instrucción textarea de AngularJS

Definición y uso

AngularJS modifica <textarea> comportamiento predeterminado del elemento, pero siempre que ng-model propiedad existe.

Proporcionan enlace de datos, lo que significa que son parte del modelo AngularJS y se pueden referir y actualizar en funciones AngularJS y DOM.

Proporcionan validación. Ejemplo: con required propiedad <textarea> elemento, siempre y cuando esté vacío, su $valid El estado se configurará false.

También proporcionan control de estado. AngularJS guarda el estado actual de todos los elementos de área de texto.

El campo de área de texto tiene los siguientes estados:

• $untouched Este campo no ha sido tocado
• $touched Este campo ha sido tocado
• $pristine Este campo aún no ha sido modificado
• $dirty Este campo ha sido modificado
• $invalid El contenido del campo es inválido
• $valid El contenido del campo es válido

Cada valor de estado representa un valor booleano, verdadero o falso.

Ejemplo

Área de texto con enlace de datos:

<textarea ng-model="myTextarea"></textarea>
<p>El valor del campo de área de texto es:</p>
<h1>{{myTextarea}}</h1>

Pruebe usted mismo

Sintaxis

<textarea ng-model="name"></textarea>

Al usar ng-model El valor de la propiedad se utiliza para referirse al elemento de área de texto.

Clases CSS

En aplicaciones AngularJS <textarea> El elemento se le asignan ciertas clases. Estas clases se pueden usar para establecer el estilo del elemento de área de texto según su estado.

Se han agregado las siguientes clases:

• ng-untouched Este campo no ha sido tocado
• ng-touched Este campo ha sido tocado
• ng-pristine Este campo aún no ha sido modificado
• ng-dirty Este campo ha sido modificado
• ng-valid El contenido del campo es válido
• ng-invalid El contenido del campo es inválido
• ng-valid-key verificar cada clave. Por ejemplo:ng-valid-requiredes muy útil cuando hay más de una cosa que debe validarse
• ng-invalid-key Por ejemplo:ng-invalid-required

Si el valor representado por la clase es falsese eliminarán estos clases.

Ejemplo

Aplicar estilos estándar CSS a los elementos de área de texto válidos e inválidos:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>

Pruebe usted mismo