AngularJS- formrichtlijn
Voorbeeld
De "geldige status" van dit formulier wordt niet als "waar" beschouwd, zolang het vereiste invoerveld leeg is:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>
Definitie en gebruik
AngularJS past het standaardgedrag van het <form>element aan.
Formulieren binnen een AngularJS-applicatie krijgen bepaalde eigenschappen. Deze eigenschappen beschrijven de huidige staat van het formulier.
Formulieren hebben de volgende statussen:
$pristineEr zijn nog geen velden gewijzigd$dirtyEen of meer zijn gewijzigd$invalidDe inhoud van het formulier is niet geldig$validDe inhoud van het formulier is geldig$submittedHet formulier is verzonden
De waarde van elke status vertegenwoordigt een Booleaanse waarde en is of true
of false.
Formulieren in AngularJS voorkomen de standaardactie, namelijk het verzenden van het formulier naar de server, als het actiekenmerk niet is opgegeven.
Syntaxis
<form name="formname"></form>
Er wordt naar formulieren verwezen door de waarde van het attribuut name te gebruiken.
CSS-klassen
Formulieren binnen een AngularJS-toepassing krijgen bepaalde klassen . Deze klassen kunnen worden gebruikt om vormen te stylen op basis van hun staat.
De volgende klassen worden toegevoegd:
ng-pristineEr zijn nog geen velden gewijzigdng-dirtyEen of meer velden zijn gewijzigdng-validDe inhoud van het formulier is geldigng-invalidDe inhoud van het formulier is niet geldigng-valid-keyEén sleutel voor elke validatie. Voorbeeld:ng-valid-required, handig wanneer er meer dan één ding moet worden gevalideerdng-invalid-keyVoorbeeld:ng-invalid-required
De klassen worden verwijderd als de waarde die ze vertegenwoordigen false.
Voorbeeld
Pas stijlen toe voor ongewijzigde (ongerepte) formulieren en voor gewijzigde formulieren:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>