Exemplo
"Estado válido" deste formulário não será considerado "verdadeiro", enquanto o campo de entrada necessário é vazio:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>
Tente você mesmo " Definição e Uso
AngularJS modifica o comportamento padrão do <form> elemento.
Formas dentro de um aplicativo AngularJS são dadas certas propriedades. Estas propriedades descreve o estado actual da forma.
Formas têm os seguintes estados:
-
$pristineNenhum campo foi ainda modificado -
$dirtyUm ou mais foram modificados -
$invalido conteúdo do formulário não é válido -
$valido conteúdo do formulário é válido -
$submittedo formulário é enviado
O valor de cada estado representa um valor booleano, e é ou true ou false .
Formas em AngularJS impede a ação padrão, que é enviar o formulário para o servidor, se o atributo de ação não é especificado.
Sintaxe
<form name=" formname "></form>Formulários estão sendo referido usando o valor do atributo nome.
Classes CSS
Formas dentro de um aplicativo AngularJS são dadas certas classes. Estas classes podem ser usados para formas de estilo de acordo com o seu estado.
São adicionadas as seguintes classes:
-
ng-pristineNenhum campo ainda não foi modificado -
ng-dirtyUm ou mais campos foi modificado -
ng-valido conteúdo do formulário é válido -
ng-invalidO conteúdo do formulário não é válido -
ng-valid- keyUma chave para cada validação. Exemplo:ng-valid-required, útil quando há mais do que uma coisa que deve ser validada -
ng-invalid- keyExemplo:ng-invalid-required
As aulas são removidos se o valor que eles representam é false .
Exemplo
Aplicar estilos para as formas não modificadas (cristalinas) e para formas modificadas:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Tente você mesmo "