AngularJS- textarearichtlijn
Voorbeeld
Een tekstgebied met databinding:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Definitie en gebruik
AngularJS past het standaardgedrag van <textarea>elementen aan, maar alleen als het ng-modelattribuut aanwezig is.
Ze bieden gegevensbinding, wat betekent dat ze deel uitmaken van het AngularJS-model, en waarnaar kan worden verwezen en waarnaar kan worden verwezen, zowel in AngularJS-functies als in de DOM.
Ze zorgen voor validatie. Voorbeeld: een <textarea>element met een requiredattribuut, heeft de $validstatus ingesteld op
falsezolang het leeg is.
Ze zorgen ook voor staatscontrole. AngularJS bevat de huidige status van alle textarea-elementen.
Tekstgebiedvelden hebben de volgende statussen:
$untouchedHet veld is nog niet aangeraakt$touchedHet veld is aangeraakt$pristineHet veld is nog niet gewijzigd$dirtyHet veld is gewijzigd$invalidDe veldinhoud is niet geldig$validDe veldinhoud is geldig
De waarde van elke status vertegenwoordigt een Booleaanse waarde en is een true
van false.
Syntaxis
<textarea ng-model="name"></textarea>
Er wordt naar Textarea-elementen verwezen door de waarde van het ng-modelattribuut te gebruiken.
CSS-klassen
<textarea>elementen binnen een AngularJS-toepassing krijgen bepaalde klassen . Deze klassen kunnen worden gebruikt om textarea-elementen op te maken op basis van hun status.
De volgende klassen worden toegevoegd:
ng-untouchedHet veld is nog niet aangeraaktng-touchedHet veld is aangeraaktng-pristineHet veld is nog niet gewijzigdng-dirtyHet veld is gewijzigdng-validDe veldinhoud is geldigng-invalidDe veldinhoud is niet geldigng-valid-keyEén sleutel voor elke validatie. Voorbeeld:ng-valid-required, handig wanneer er meer dan één ding moet worden gevalideerdng-invalid-keyVoorbeeld:ng-invalid-required
De klassen worden verwijderd als de waarde die ze vertegenwoordigen false.
Voorbeeld
Pas stijlen toe voor geldige en ongeldige tekstgebiedelementen, met behulp van standaard CSS:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>