AngularJS textarea-instructie

AngularJS Referentiemanual

definitie en gebruik

AngularJS wijzigt <textarea> standaardgedrag van het element, maar op voorwaarde dat ng-model eigenschap bestaat.

Ze bieden data-binding, wat betekent dat ze een onderdeel van de AngularJS-model zijn en kunnen worden gerefdereerd en bijgewerkt in AngularJS-functies en DOM.

Ze bieden validatie. Voorbeeld: met required eigenschappen <textarea> elementen, zolang deze leeg zijn, hun $valid De status wordt ingesteld op false.

Ze bieden ook statuscontrole. AngularJS slaat de huidige status van alle tekstregio-elementen op.

Tekstregio-velden hebben de volgende statussen:

  • $untouched Dit veld is nog niet aangeraakt
  • $touched Dit veld is aangeraakt
  • $pristine Dit veld is nog niet aangepast
  • $dirty Dit veld is aangepast
  • $invalid Veldinhoud is ongeldig
  • $valid Veldinhoud is geldig

De waarde van elke status vertegenwoordigt een booleaanse waarde, waar of niet.

Voorbeeld

Tekstregio met data-binding:

<textarea ng-model="myTextarea"></textarea>
<p>De waarde van het tekstregio-veld is:</p>
<h1>{{myTextarea}}</h1>

Probeer het zelf

syntaxis

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

Door gebruik te maken van ng-model waarden van de eigenschappen om tekstregio-elementen te verwijzen.

CSS-klassen

Binnen AngularJS-applicaties <textarea> Elementen krijgen bepaalde klassen. Deze klassen kunnen worden gebruikt om de stijl van tekstregio-elementen op basis van hun status in te stellen.

De volgende klassen zijn toegevoegd:

  • ng-untouched Dit veld is nog niet aangeraakt
  • ng-touched Dit veld is aangeraakt
  • ng-pristine Dit veld is nog niet aangepast
  • ng-dirty Dit veld is aangepast
  • ng-valid Veldinhoud is geldig
  • ng-invalid Veldinhoud is ongeldig
  • ng-valid-key Controleer elke sleutel een keer. Bijvoorbeeld:ng-valid-requiredzeer nuttig is wanneer er meer dan één ding moet worden geverifieerd
  • ng-invalid-key Bijvoorbeeld:ng-invalid-required

Als de waarde die de klasse vertegenwoordigt falseworden deze klassen verwijderd.

Voorbeeld

Gebruik standaard CSS om stijlen toe te passen op elementen van tekstvakken die geldig en ongeldig zijn:

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

Probeer het zelf

AngularJS Referentiemanual