AngularJS form-instruktion

Definition og brug

AngularJS ændrer <form> Elementets standardopførsel.

Formularen i AngularJS-programmet har nogle egenskaber. Disse egenskaber beskriver formularens nuværende tilstand.

Formularen har følgende tilstande:

• $pristine Ingen felter er blevet ændret
• $dirty En eller flere felter er blevet ændret
• $invalid Formularindholdet er ugyldigt
• $valid Formularindholdet er gyldigt
• $subscribed Formularen er blevet sendt

Hver tilstandsværdi repræsenterer en boolean værdi, der angiver true eller false.

Hvis action-attributten ikke er specificeret, blokerer AngularJS formularen for standardoperationen, dvs. at sende formularen til serveren.

Eksempel

Eksempel 1

Så længe det nødvendige inputfelt er tomt, vil formularens "gyldige tilstand" ikke blive betragtet som "true":

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>Formularens gyldige tilstand er:</p>
<h1>{{myForm.$valid}}</h1>

Prøv det selv

Eksempel 2

Anvend stilen på de uændrede (oprindelige) formularen og den ændrede formularen:

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

Prøv det selv

Syntax

<form name="formname</form>

ved at bruge name værdien af egenskaben for at referere til formularen.

CSS-klasser

Formularer inden for AngularJS-applikationen får nogle klasser. Disse klasser kan bruges til at sætte formularstilen baseret på deres tilstand.

Følgende klasser blev tilføjet:

• ng-pristine Der er ingen felter, der endnu ikke er ændret
• ng-dirty En eller flere felter er blevet ændret
• ng-valid Formularindholdet er gyldigt
• ng-invalid Formularindholdet er ugyldigt
• ng-valid-key Valider en nøgle ad gangen. For eksempel:ng-valid-requireder meget nyttigt, når der skal valideres flere elementer på én gang
• ng-invalid-key For eksempel:ng-invalid-required

Hvis værdien repræsenteret af klassen falseSå vil disse klasser blive slettet.