AngularJS textarea-instruktion

Definition och användning

AngularJS ändrar <textarea> elementets standardbeteende, men förutsatt att ng-model egenskap finns.

De tillhandahåller data-binding, vilket innebär att de är en del av AngularJS-modellen och kan hänvisas till och uppdateras i AngularJS-funktioner och DOM.

De tillhandahåller validering. Exempel: med required egenskapens <textarea> element, så länge det är tomt, dess $valid Tillståndet sätts till false.

De tillhandahåller också tillståndskontroll. AngularJS sparar alla textområdeselements nuvarande tillstånd.

Textområdesfältet har följande tillstånd:

• $untouched Detta fält har inte blivit berört
• $touched Detta fält har blivit berört
• $pristine detta fält har inte ändrats ännu
• $dirty detta fält har ändrats
• $invalid fältinnehållet är ogiltigt
• $valid fältinnehållet är giltigt

Varje tillståndets värde representerar ett booleskt värde, sant eller falskt.

Exempel

Textområden med data-binding:

<textarea ng-model="myTextarea"></textarea>
<p>Textområdesfältets värde är:</p>
<h1>{{myTextarea}}</h1>

Prova själv

Syntax

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

Genom att använda ng-model värdet för egenskapen för att hänvisa till textområdeselementen.

CSS-klasser

Inom AngularJS-applikationer <textarea> Elementet tilldelas vissa klasser. Dessa klasser kan användas för att ställa in stilar baserat på tillståndet för textområdeselementen.

Följande klasser har lagts till:

• ng-untouched Detta fält har inte blivit berört
• ng-touched Detta fält har blivit berört
• ng-pristine detta fält har inte ändrats ännu
• ng-dirty detta fält har ändrats
• ng-valid fältinnehållet är giltigt
• ng-invalid fältinnehållet är ogiltigt
• ng-valid-key validera en nyckel varje gång. Exempel:ng-valid-requiredär mycket användbart när det finns flera saker att validera
• ng-invalid-key Exempel:ng-invalid-required

Om klassen representerar värdet falsedessa klasser kommer att tas bort.

Exempel

Använd standard CSS för att tillämpa stil på element för giltiga och ogiltiga textområden:

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

Prova själv