formDiretiva AngularJS
Exemplo
O "estado válido" deste formulário não será considerado "verdadeiro", desde que o campo de entrada obrigatório esteja vazio:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>
Definição e uso
AngularJS modifica o comportamento padrão do <form>elemento.
Formulários dentro de um aplicativo AngularJS recebem certas propriedades. Essas propriedades descrevem o estado atual do formulário.
Os formulários têm os seguintes estados:
$pristineNenhum campo foi modificado ainda$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 é true
ou false.
Forms em AngularJS impede a ação padrão, que é enviar o formulário ao servidor, se o atributo action não for especificado.
Sintaxe
<form name="formname"></form>
Os formulários estão sendo referenciados usando o valor do atributo name.
Classes CSS
Forms dentro de um aplicativo AngularJS recebem certas classes . Essas classes podem ser usadas para estilizar formulários de acordo com seu estado.
As seguintes classes são adicionadas:
ng-pristineNenhum campo ainda não foi modificadong-dirtyUm ou mais campos foram modificadosng-validO conteúdo do formulário é válidong-invalidO conteúdo do formulário 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 formulários não modificados (pristine) e para formulários modificados:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>