Instrução textarea do AngularJS

Definição e uso

AngularJS modifique <textarea> comportamento padrão do elemento, mas desde que ng-model propriedade existe.

Eles fornecem ligação de dados, o que significa que eles são parte do modelo AngularJS e podem ser referenciados e atualizados em funções AngularJS e DOM.

Eles fornecem validação. Exemplo: com required propriedade <textarea> elemento, desde que ele esteja vazio, seu $valid O estado será configurado false.

Eles também fornecem controle de estado. O AngularJS salva o estado atual de todos os elementos de área de texto.

O campo de área de texto tem os seguintes estados:

• $untouched Este campo ainda não foi tocado
• $touched Este campo foi tocado
• $pristine Este campo ainda não foi modificado
• $dirty Este campo foi modificado
• $invalid Conteúdo do campo inválido
• $valid Conteúdo do campo válido

Cada valor de estado representa um valor booleano, verdadeiro ou falso.

Exemplo

Área de texto com ligação de dados:

<textarea ng-model="myTextarea"></textarea>
<p>O valor do campo de área de texto é:</p>
<h1>{{myTextarea}}</h1>

Experimente você mesmo

Sintaxe

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

Ao usar ng-model O valor da propriedade para referenciar o elemento de área de texto.

Classes CSS

Dentro de um aplicativo AngularJS <textarea> O elemento é atribuído a algumas classes. Essas classes podem ser usadas para definir estilos com base no estado do elemento de área de texto.

Foram adicionadas as seguintes classes:

• ng-untouched Este campo ainda não foi tocado
• ng-touched Este campo foi tocado
• ng-pristine Este campo ainda não foi modificado
• ng-dirty Este campo foi modificado
• ng-valid Conteúdo do campo válido
• ng-invalid Conteúdo do campo inválido
• ng-valid-key Validar cada chave uma vez. Por exemplo:ng-valid-requiredé muito útil quando há mais de uma coisa a ser validada
• ng-invalid-key Por exemplo:ng-invalid-required

Se o valor representado pela classe for falseentão essas classes serão removidas.

Exemplo

Aplicar estilos padrão CSS para elementos de área de texto válida e inválida:

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

Experimente você mesmo