form
Direttiva AngularJS
Esempio
Lo "stato valido" di questo modulo non sarà considerato "vero", purché il campo di input richiesto sia vuoto:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>
Definizione e utilizzo
AngularJS modifica il comportamento predefinito <form>
dell'elemento.
Ai moduli all'interno di un'applicazione AngularJS vengono fornite determinate proprietà. Queste proprietà descrivono lo stato corrente del modulo.
I moduli hanno i seguenti stati:
$pristine
Nessun campo è stato ancora modificato$dirty
Uno o più sono stati modificati$invalid
Il contenuto del modulo non è valido$valid
Il contenuto del modulo è valido$submitted
Il modulo viene inviato
Il valore di ogni stato rappresenta un valore booleano ed è o true
o false
.
Moduli in AngularJS impedisce l'azione predefinita, che sta inviando il modulo al server, se l'attributo dell'azione non è specificato.
Sintassi
<form name="formname"></form>
Si fa riferimento ai moduli utilizzando il valore dell'attributo name.
Classi CSS
Ai moduli all'interno di un'applicazione AngularJS vengono fornite determinate classi . Queste classi possono essere utilizzate per modellare i moduli in base al loro stato.
Si aggiungono le seguenti classi:
ng-pristine
Nessun campo non è stato ancora modificatong-dirty
Uno o più campi sono stati modificating-valid
Il contenuto del modulo è validong-invalid
Il contenuto del modulo non è validong-valid-key
Una chiave per ogni convalida. Esempio:ng-valid-required
, utile quando ci sono più cose che devono essere convalidateng-invalid-key
Esempio:ng-invalid-required
Le classi vengono rimosse se il valore che rappresentano è false
.
Esempio
Applicare gli stili per i moduli non modificati (pristine) e per i moduli modificati:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>