Los últimos tutoriales de desarrollo web
 

AngularJS Directiva área de texto

❮ AngularJS Referencia

Ejemplo

Un área de texto con los datos de unión:

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

<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Inténtalo tú mismo "

Definición y Uso

AngularJS modifica el comportamiento predeterminado de <textarea> elementos, pero sólo si el ng-model atributo está presente.

Proporcionan enlace de datos, lo que significa que son parte del modelo AngularJS, y se puede hacer referencia a, y actualizados, tanto en funciones AngularJS y en el DOM.

Ellos proporcionan una validación. Ejemplo: un <textarea> elemento con un required atributo, tiene la $valid Estado establecido en false , siempre y cuando esté vacío.

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

campos de área de texto tienen los siguientes estados:

  • $untouched El campo no se ha tocado todavía
  • $touched El campo ha sido tocado
  • $pristine El campo no se ha modificado todavía
  • $dirty El campo ha sido modificado
  • $invalid El contenido del campo no es válido
  • $valid El contenido del campo es válida

El valor de cada estado representa un valor booleano, y de que sea true de false .

Sintaxis

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

Elementos de área de texto se hace referencia mediante el valor de la ng-model atributo.

Las clases CSS

<textarea> elementos dentro de una aplicación AngularJS se dan ciertas clases. Estas clases se pueden utilizar para los elementos de área de texto estilo de acuerdo a su estado.

Se añaden las siguientes clases:

  • ng-untouched El campo no se ha tocado todavía
  • ng-touched El campo ha sido tocado
  • ng-pristine El campo no se ha modificado todavía
  • ng-dirty El campo ha sido modificado
  • ng-valid El contenido del campo es válida
  • ng-invalid El contenido del campo no es válida
  • ng-valid- key Una de las claves para cada validación. Ejemplo: ng-valid-required , útil cuando hay más de una cosa que debe ser validada
  • ng-invalid- key Ejemplo: ng-invalid-required

Las clases se eliminan si el valor que representan es false .

Ejemplo

Aplicar estilos para los elementos de área de texto válidas y no válidas, el uso de CSS estándar:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>
Inténtalo tú mismo "
❮ AngularJS Referencia