AngularJS textarea-instruktion

definition og brug

AngularJS ændrer <textarea> elementets standardadfærd, men forudsat at ng-model egenskab eksisterer.

De tilbyder data-binding, 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 <textarea> 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 tekstområdets elementer.

Tekstområdets felt 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 endnu ikke blevet ændret
• $dirty Dette felt er blevet ændret
• $invalid Feltindholdet er ugyldigt
• $valid Feltindholdet er gyldigt

Hver tilstandsværdi repræsenterer et boolesk værdi, enten sandt eller falsk.

Eksempel

Tekstområder med data-binding:

<textarea ng-model="myTextarea"></textarea>
<p>Tekstområdets feltværdi er:</p>
<h1>{{myTextarea}}</h1>

Prøv det selv

syntaks

<textarea ng-model="name"></textarea>

Ved at bruge ng-model værdier for at referere til tekstområdets elementer.

CSS-klasser

AngularJS applikationens <textarea> Elementet får nogle klasser. Disse klasser kan bruges til at sætte stilen for tekstområdets elementer baseret på deres 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 endnu ikke blevet ændret
• ng-dirty Dette felt er blevet ændret
• ng-valid Feltindholdet er gyldigt
• ng-invalid Feltindholdet er ugyldigt
• ng-valid-key validerer en nøgle ad gangen. For eksempel:ng-valid-requireder meget nyttigt, når der skal valideres mere end én ting
• ng-invalid-key For eksempel:ng-invalid-required

Hvis klassen repræsenterer værdien falsedette vil fjerne disse klasser.

Eksempel

Brug standard CSS til at anvende stilarter til elementer for gyldige og ugyldige tekstområder:

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

Prøv det selv