tutoriais mais recente desenvolvimento web
 

AngularJS Directiva textarea

❮ AngularJS Referência

Exemplo

Um textarea com de ligação de dados:

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

<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Tente você mesmo "

Definição e Uso

AngularJS modifica o comportamento padrão do <textarea> elementos, mas somente se o ng-model atributo está presente.

Eles fornecem os dados de ligação, o que significa que eles são parte do modelo AngularJS, e pode ser referido, e atualizado, tanto em funções AngularJS e no DOM.

Eles fornecem validação. Exemplo: um <textarea> elemento com um required atributo, tem a $valid estado definido como false , enquanto ele está vazio.

Eles também fornecem o controle do Estado. AngularJS mantém o estado atual de todos os elementos textarea.

áreas de texto têm os seguintes estados:

  • $untouched O campo ainda não foi tocado
  • $touched O campo foi tocado
  • $pristine O campo ainda não foi modificado
  • $dirty O campo foi modificado
  • $invalid O conteúdo do campo não é válido
  • $valid o conteúdo do campo é válido

O valor de cada estado representa um valor booleano, e seja true de false .

Sintaxe

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

Elementos textarea estão sendo referido usando o valor do ng-model atributo.

Classes CSS

<textarea> elementos dentro de uma aplicação AngularJS são dadas certas classes. Essas classes podem ser usados ​​para elementos estilo textarea de acordo com seu estado.

São adicionadas as seguintes classes:

  • ng-untouched O campo ainda não foi tocado
  • ng-touched O campo foi tocado
  • ng-pristine O campo ainda não foi modificado
  • ng-dirty O campo foi modificado
  • ng-valid o conteúdo do campo é válido
  • ng-invalid O conteúdo do campo não é válida
  • ng-valid- key Uma chave para cada validação. Exemplo: ng-valid-required , útil quando há mais do que uma coisa que deve ser validada
  • ng-invalid- key Exemplo: ng-invalid-required

As aulas são removidos se o valor que eles representam é false .

Exemplo

Aplicar estilos para elementos textarea válidas e inválidas, utilizando CSS padrão:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>
Tente você mesmo "
❮ AngularJS Referência