inputDiretiva AngularJS
Exemplo
Um campo de entrada com vinculação de dados:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Definição e uso
O AngularJS modifica o comportamento padrão dos <input>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 <input>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 de entrada.
Os campos de entrada 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
ou false.
Sintaxe
<input ng-model="name">
Elementos de entrada estão sendo referenciados usando o valor do ng-modelatributo.
Classes CSS
<input>elementos dentro de um aplicativo AngularJS recebem certas classes . Essas classes podem ser usadas para estilizar elementos de entrada 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 entrada válidos e inválidos, usando CSS padrão:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>