Instrução form do AngularJS

Definição e uso

Modificação do AngularJS <form> Comportamento padrão do elemento.

Os formulários dentro do aplicativo AngularJS são atribuídos certos atributos. Esses atributos descrevem o estado atual do formulário.

O formulário possui os seguintes estados:

• $pristine Nenhum campo foi modificado
• $dirty Um ou mais campos foram modificados
• $invalid Conteúdo do formulário inválido
• $valid Conteúdo do formulário válido
• $subscribed O formulário foi submetido

O valor de cada estado representa um valor booleano, que é true ou falso.

Se o atributo action não for especificado, o formulário do AngularJS impedirá a operação padrão, ou seja, submeter o formulário ao servidor.

Exemplo

Exemplo 1

Enquanto o campo de entrada necessário estiver vazio, o estado de "validação" deste formulário não será considerado "true":

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>O estado de validação do formulário é:</p>
<h1>{{myForm.$valid}}</h1>

Experimente você mesmo

Exemplo 2

Aplicar estilos ao formulário não modificado (original) e ao formulário modificado:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>

Experimente você mesmo

Sintaxe

<form name="formname</form>

ao usar name para referenciar o formulário.

Classe CSS

O formulário dentro do aplicativo AngularJS é atribuído a algumas classes. Essas classes podem ser usadas para definir estilos de formulário com base em seu estado.

Adicionadas as seguintes classes:

• ng-pristine Nenhum campo ainda não foi modificado
• ng-dirty Um ou mais campos foram modificados
• ng-valid Conteúdo do formulário válido
• ng-invalid Conteúdo do formulário inválido
• ng-valid-key Verificar cada chave uma vez. Por exemplo:ng-valid-requiredmuito útil quando há mais de uma verificação necessária.
• ng-invalid-key Por exemplo:ng-invalid-required

Se o valor representado pela classe for falsoSe essas classes forem removidas.