Instrução input do AngularJS
Definição e uso
O AngularJS altera <input> comportamento padrão do elemento, desde que a propriedade ng-model exista.
Eles fornecem ligação de dados, o que significa que eles fazem parte do modelo AngularJS e podem ser referenciados e atualizados em funções AngularJS e DOM.
Eles fornecem validação. Exemplo: com required propriedade <input> O elemento, desde que 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 entrada.
O campo de entrada tem os seguintes estados:
$untouchedEste campo ainda não foi tocado$touchedEste campo foi tocado$pristineEste campo ainda não foi modificado$dirtyEste campo foi modificado$invalidConteúdo do campo inválido$validConteúdo do campo válido
O valor de cada estado representa um valor booleano, sendo true ou false.
Exemplo
Caixa de entrada com ligação de dados:
<input ng-model="myInput">
<p>O valor da caixa de entrada é:</p>
<h1>{{myInput}}</h1>
Sintaxe
<input ng-model="name">
Usando ng-model o valor da propriedade para referenciar o elemento de entrada.
Classes CSS
Dentro de um aplicativo AngularJS <input> O elemento é atribuído a algumas classes. Essas classes podem ser usadas para definir estilos com base no estado do elemento de entrada.
Foram adicionadas as seguintes classes:
ng-untouchedEste campo ainda não foi tocadong-touchedEste campo foi tocadong-pristineEste campo ainda não foi modificadong-dirtyEste campo foi modificadong-validConteúdo do campo válidong-invalidConteúdo do campo inválidong-valid-keyValidar cada chave uma vez. Por exemplo:ng-valid-requiredé útil quando há mais de uma coisa a ser validadang-invalid-keyPor exemplo:ng-invalid-required
Se o valor representado pela classe for falseentão essas classes serão removidas.
Exemplo
Aplicar estilos CSS padrão para elementos de entrada válidos e inválidos:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
