Esempio
"Stato valido" di questo form non verranno considera "vera", a patto che il campo di introduzione è vuoto:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>
Prova tu stesso " Definizione e utilizzo
AngularJS modifica il comportamento predefinito del <form> elemento.
I moduli all'interno di un'applicazione AngularJS sono date certe proprietà. Queste proprietà descrive lo stato corrente del modulo.
Forme hanno i seguenti stati:
-
$pristineNessun campo sono ancora stati modificati -
$dirtyUno o più sono stati modificati -
$invalidIl contenuto del modulo non è valido -
$validIl contenuto modulo è valido -
$submittedil modulo viene inviato
Il valore di ogni stato rappresenta un valore booleano, ed è sia true o false .
Forme in AngularJS impedisce l'azione di default, che è inviare il modulo al server, se l'attributo di azione non è specificato.
Sintassi
<form name=" formname "></form>I moduli vengono indicati con utilizzando il valore dell'attributo name.
Le classi CSS
I moduli all'interno di un'applicazione AngularJS sono date certe classi. Queste classi possono essere utilizzate per forme di stile secondo il loro stato.
Vengono aggiunte le seguenti classi:
-
ng-pristineNessun campo non è stato ancora modificato -
ng-dirtyUno o più campi è stato modificato -
ng-validIl contenuto modulo è valido -
ng-invalidIl contenuto modulo non è valida -
ng-valid- keyUna chiave per ogni convalida. Esempio:ng-valid-required, utile quando ci sono più di una cosa che deve essere convalidato -
ng-invalid- keyEsempio:ng-invalid-required
Le classi vengono rimossi se il valore che essi rappresentano è false .
Esempio
Applicare stili per le forme non modificati (incontaminate), e per le forme modificate:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Prova tu stesso "