instrukcja textarea AngularJS

definicje i użycie

AngularJS modyfikuje <textarea> domyślne zachowanie elementu, ale pod warunkiem, że ng-model atrybut istnieje.

One zapewniają wiązanie danych, co oznacza, że są częścią modelu AngularJS i można je odnosić oraz aktualizować w funkcjach AngularJS i DOM.

One zapewniają walidację. Przykład: mają required atrybut <textarea> element, o ile jest pusty, jego $valid Stan zostanie ustawiony na false.

One również zapewniają kontrolę stanu. AngularJS zachowuje bieżący stan wszystkich elementów obszaru tekstowego.

Pole tekstowe ma następujące stany:

• $untouched Pole pola nie zostało dotknięte
• $touched Pole pola zostało dotknięte
• $pristine Pole nie zostało zmienione
• $dirty Pole zostało zmienione
• $invalid Zawartość pola jest niewłaściwa
• $valid Zawartość pola jest poprawna

Każda wartość stanu reprezentuje wartość logiczną, prawda lub fałsz.

Przykład

Pole tekstowe z wiązaniem danych:

<textarea ng-model="myTextarea"></textarea>
<p>Wartość pola obszaru tekstowego to:</p>
<h1>{{myTextarea}}</h1>

Spróbuj sam

Gramatyka

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

Poprzez użycie ng-model Wartości atrybutów do odniesienia do elementów obszaru tekstowego.

Klasy CSS

W aplikacji AngularJS <textarea> Element otrzymuje pewne klasy. Te klasy można używać do ustawiania stylów na podstawie stanu elementu obszaru tekstowego.

Dodano następujące klasy:

• ng-untouched Pole pola nie zostało dotknięte
• ng-touched Pole pola zostało dotknięte
• ng-pristine Pole nie zostało zmienione
• ng-dirty Pole zostało zmienione
• ng-valid Zawartość pola jest poprawna
• ng-invalid Zawartość pola jest niewłaściwa
• ng-valid-key Weryfikuj każdy klucz raz. Na przykład:ng-valid-requiredjest bardzo przydatne, gdy musi być zweryfikowane więcej niż jedno wydarzenie
• ng-invalid-key Na przykład:ng-invalid-required

Jeśli wartość reprezentowana przez klasę falseW przypadku usunięcia tych klas.

Przykład

Zastosuj standardowy CSS do elementów tekstowych, które są poprawne i niepoprawne:

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

Spróbuj sam