AngularJS input-instruktion

definering og brug

AngularJS ændrer <input> elementets standardadferd, men forudsat at ng-model-egenskaben eksisterer.

De tilbyder databinding, hvilket betyder, at de er en del af AngularJS-modellen og kan refereres til og opdateres i AngularJS-funktioner og DOM.

De tilbyder validering. Eksempel: med required egenskab <input> element, så længe det er tomt, dens $valid tilstanden vil blive sat til false.

De tilbyder også tilstandskontrol. AngularJS gemmer den nuværende tilstand for alle inputelementer.

Inputfeltene har følgende tilstande:

• $untouched Dette feltet er endnu ikke blevet rørt ved
• $touched Dette feltet er blevet rørt ved
• $pristine Dette felt er ikke blevet ændret
• $dirty Dette felt er blevet ændret
• $invalid Feltindhold er ugyldigt
• $valid Feltindhold er gyldigt

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

Eksempel

Inputfelt med databinding:

<input ng-model="myInput">
<p>Værdien af inputfeltet er:</p>
<h1>{{myInput}}</h1>

Prøv det selv

syntaks

<input ng-model="name">

bruges ng-model værdier for at referere til inputelementet.

CSS-klasser

AngularJS-applikationens <input> Elementet får visse klasser. Disse klasser kan bruges til at sætte stilen for inputelementets tilstand.

Følgende klasser blev tilføjet:

• ng-untouched Dette feltet er endnu ikke blevet rørt ved
• ng-touched Dette feltet er blevet rørt ved
• ng-pristine Dette felt er ikke blevet ændret
• ng-dirty Dette felt er blevet ændret
• ng-valid Feltindhold er gyldigt
• ng-invalid Feltindhold er ugyldigt
• ng-valid-key validerer en nøgle ad gangen. Eksempel:ng-valid-requireder meget nyttigt, når der skal valideres flere ting på én gang
• ng-invalid-key Eksempel:ng-invalid-required

Hvis klassen repræsenterer værdien falsevil blive fjernet.

Eksempel

Anvend standard CSS til at anvende stiler til gyldige og ugyldige inputelementer:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>

Prøv det selv