textareaDyrektywa AngularJS
Przykład
Obszar tekstowy z wiązaniem danych:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Definicja i użycie
AngularJS modyfikuje domyślne zachowanie <textarea>elementów, ale tylko wtedy, gdy ng-modelatrybut jest obecny.
Zapewniają wiązanie danych, co oznacza, że są częścią modelu AngularJS i można się do nich odwoływać i aktualizować zarówno w funkcjach AngularJS, jak iw DOM.
Zapewniają walidację. Przykład: <textarea>element z requiredatrybutem ma $validustawiony stan
falsetak długo, jak jest pusty.
Zapewniają również kontrolę państwa. AngularJS przechowuje aktualny stan wszystkich elementów textarea.
Pola tekstowe mają następujące stany:
$untouchedPole nie zostało jeszcze dotknięte$touchedPole zostało dotknięte$pristinePole nie zostało jeszcze zmodyfikowane$dirtyPole zostało zmodyfikowane$invalidZawartość pola jest nieprawidłowa$validZawartość pola jest prawidłowa
Wartość każdego stanu reprezentuje wartość logiczną i jest jedną true
z false.
Składnia
<textarea ng-model="name"></textarea>
Do elementów Textarea odwołuje się wartość ng-modelatrybutu.
Klasy CSS
<textarea>elementy wewnątrz aplikacji AngularJS mają określone klasy . Te klasy mogą służyć do stylizowania elementów textarea zgodnie z ich stanem.
Dodaje się następujące klasy:
ng-untouchedPole nie zostało jeszcze dotknięteng-touchedPole zostało dotknięteng-pristinePole nie zostało jeszcze zmodyfikowaneng-dirtyPole zostało zmodyfikowaneng-validZawartość pola jest prawidłowang-invalidZawartość pola jest nieprawidłowang-valid-keyJeden klucz do każdej walidacji. Przykład:ng-valid-required, przydatne, gdy istnieje więcej niż jedna rzecz, która musi zostać zweryfikowanang-invalid-keyPrzykład:ng-invalid-required
Klasy są usuwane, jeśli reprezentowana przez nie wartość to false.
Przykład
Zastosuj style dla prawidłowych i nieprawidłowych elementów textarea, używając standardowego CSS:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>