textareaDiretiva AngularJS
Exemplo
Uma área de texto com vinculação de dados:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Definição e uso
O AngularJS modifica o comportamento padrão dos <textarea>elementos, mas somente se o ng-modelatributo estiver presente.
Eles fornecem vinculação de dados, o que significa que eles fazem parte do modelo AngularJS e podem ser referenciados e atualizados, tanto em funções AngularJS quanto no DOM.
Eles fornecem validação. Exemplo: um <textarea>elemento com um requiredatributo, tem o $validestado definido
falseenquanto estiver vazio.
Eles também fornecem controle estatal. AngularJS mantém o estado atual de todos os elementos textarea.
Os campos Textarea têm os seguintes estados:
$untouchedO campo ainda não foi tocado$touchedO campo foi tocado$pristineO campo ainda não foi modificado$dirtyO campo foi modificado$invalidO conteúdo do campo não é válido$validO conteúdo do campo é válido
O valor de cada estado representa um valor booleano e true
é false.
Sintaxe
<textarea ng-model="name"></textarea>
Elementos textarea estão sendo referenciados usando o valor do ng-modelatributo.
Classes CSS
<textarea>elementos dentro de um aplicativo AngularJS recebem certas classes . Essas classes podem ser usadas para estilizar elementos textarea de acordo com seu estado.
As seguintes classes são adicionadas:
ng-untouchedO campo ainda não foi tocadong-touchedO campo foi tocadong-pristineO campo ainda não foi modificadong-dirtyO campo foi modificadong-validO conteúdo do campo é válidong-invalidO conteúdo do campo não é válidong-valid-keyUma chave para cada validação. Exemplo:ng-valid-required, útil quando há mais de uma coisa que deve ser validadang-invalid-keyExemplo:ng-invalid-required
As classes são removidas se o valor que elas representam for false.
Exemplo
Aplique estilos para elementos de área de texto válidos e inválidos, usando CSS padrão:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>