AngularJS form-instructie

Definitie en gebruik

AngularJS wijzigt <form> Standaardgedrag van elementen.

Formulieren binnen AngularJS-applicaties hebben bepaalde eigenschappen. Deze eigenschappen beschrijven de huidige status van het formulier.

Het formulier heeft de volgende statussen:

• $pristine Geen veld is gewijzigd
• $dirty Een of meerdere velden zijn aangepast
• $invalid Het formulierinhoud is ongeldig
• $valid Het formulierinhoud is geldig
• $subscribed Het formulier is ingediend

De waarde van elke status vertegenwoordigt een booleaanse waarde, dat wil zeggen true of false.

Als de action-eigenschap niet is gespecificeerd, blokkeert AngularJS de standaardactie, dat wil zeggen het indienen van het formulier naar de server.

Voorbeeld

Voorbeeld 1

Zolang de benodigde invoervelden leeg zijn, wordt de 'geldigheidsstatus' van dit formulier niet als 'true' beschouwd:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>De geldigheidsstatus van het formulier is:</p>
<h1>{{myForm.$valid}}</h1>

Probeer het zelf uit

Voorbeeld 2

Toepassen van stijlen op de oorspronkelijke (ongewijzigde) formulier en het gewijzigde formulier:

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

Probeer het zelf uit

Syntaxis

<form name="formname</form>

Door het gebruik van name waarden van eigenschappen om het formulier te verwijzen.

CSS-klassen

Formulieren binnen AngularJS-applicaties krijgen bepaalde klassen toegewezen. Deze klassen kunnen worden gebruikt om de stijl van het formulier op basis van zijn status in te stellen.

De volgende klassen zijn toegevoegd:

• ng-pristine Er zijn geen velden die nog niet zijn aangepast
• ng-dirty Een of meerdere velden zijn aangepast
• ng-valid Het formulierinhoud is geldig
• ng-invalid Het formulierinhoud is ongeldig
• ng-valid-key Controleer elke sleutel een keer. Bijvoorbeeld:ng-valid-requiredzeer nuttig wanneer er meer dan één item moet worden geverifieerd
• ng-invalid-key bijvoorbeeld:ng-invalid-required

als de waarde die de klasse vertegenwoordigt falsewanneer deze klassen worden verwijderd.