AngularJS textareaYönergesi
Örnek
Veri bağlama içeren bir textarea:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Tanım ve Kullanım
AngularJS, öğelerin varsayılan davranışını değiştirir <textarea>, ancak yalnızca ng-modelöznitelik varsa.
Veri bağlama sağlarlar, yani AngularJS modelinin bir parçası olurlar ve hem AngularJS işlevlerinde hem de DOM'da başvurulabilir ve güncellenebilirler.
Doğrulama sağlarlar. Örnek: özniteliği <textarea>olan bir öğe , boş olduğu sürece durumu ayarlıdır
.required$validfalse
Ayrıca devlet kontrolü sağlarlar. AngularJS, tüm textarea öğelerinin mevcut durumunu tutar.
Textarea alanları aşağıdaki durumlara sahiptir:
$untouchedHenüz alana dokunulmadı$touchedAlana dokunuldu$pristineAlan henüz değiştirilmedi$dirtyAlan değiştirildi$invalidAlan içeriği geçerli değil$validAlan içeriği geçerli
Her durumun değeri bir Boolean değerini temsil eder ve aşağıdakilerden true
biridir false.
Sözdizimi
<textarea ng-model="name"></textarea>
ng-modelTextarea öğelerine, özniteliğin değeri kullanılarak başvurulur .
CSS Sınıfları
<textarea>AngularJS uygulamasının içindeki öğelere belirli sınıflar verilir . Bu sınıflar, textarea öğelerini durumlarına göre biçimlendirmek için kullanılabilir.
Aşağıdaki sınıflar eklenir:
ng-untouchedHenüz alana dokunulmadıng-touchedAlana dokunuldung-pristineAlan henüz değiştirilmeding-dirtyAlan değiştirilding-validAlan içeriği geçerling-invalidAlan içeriği geçerli değilng-valid-keyHer doğrulama için bir anahtar . Örnek:ng-valid-required, doğrulanması gereken birden fazla şey olduğunda kullanışlıdırng-invalid-keyÖrnek:ng-invalid-required
Temsil ettikleri değer ise sınıflar kaldırılır false.
Örnek
Standart CSS kullanarak geçerli ve geçersiz metin alanı öğeleri için stiller uygulayın:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>