پیشنهاد دوره:

نشانگر textarea AngularJS

تعریف و استفاده <textarea> AngularJS تغییر می‌دهد ng-model رفتار پیش‌فرض عناصر، اما با این شرط که

ویژگی وجود دارد.

آن‌ها پیوندهای داده را ارائه می‌دهند، این به این معناست که آن‌ها بخشی از مدل AngularJS هستند و می‌توانند در توابع AngularJS و DOM ارجاع و به‌روزرسانی شوند. آن‌ها تأیید را ارائه می‌دهند. مثال: دارای required <textarea> عناصر، تا زمانی که آن‌ها خالی باشند، ویژگی‌های $valid حالت تنظیم خواهد شد false.

آن‌ها همچنین کنترل حالت را ارائه می‌دهند. AngularJS حالت فعلی همه‌ی عناصر منطقه‌ای متن را ذخیره می‌کند.

فیلد منطقه‌ای متن دارای حالت‌های زیر است:

• $untouched این فیلد هنوز لمس نشده است
• $touched این فیلد لمس شده است
• $pristine این فیلد هنوز تغییر نکرده است
• $dirty این فیلد تغییر کرده است
• $invalid محتوای فیلد نامعتبر است
• $valid محتوای فیلد معتبر است

مقدار هر حالت یک مقدار بولین است، درست یا نادرست.

مثال

منطقه‌ای متن با پیوندهای داده:

<textarea ng-model="myTextarea"></textarea>
<p>مقدار فیلد منطقه‌ای متن:</p>
<h1>{{myTextarea}}</h1>

آزمایش کنید

نحوه‌ی نوشتن

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

با استفاده از ng-model مقدار ویژگی‌ها برای اشاره به عناصر منطقه‌ای متن استفاده می‌شود.

کلاس‌های CSS

در برنامه‌های AngularJS <textarea> عناصر با برخی از کلاس‌ها تعیین می‌شوند. این کلاس‌ها می‌توانند برای تنظیم استایل بر اساس حالت عناصر منطقه‌ای متن استفاده شوند.

کلاس‌های زیر اضافه شده‌اند:

• ng-untouched این فیلد هنوز لمس نشده است
• ng-touched این فیلد لمس شده است
• ng-pristine این فیلد هنوز تغییر نکرده است
• ng-dirty این فیلد تغییر کرده است
• ng-valid محتوای فیلد معتبر است
• ng-invalid محتوای فیلد نامعتبر است
• ng-valid-key هر بار یک کلید را تأیید می‌کند. مثال:ng-valid-required، زمانی که بیش از یک چیز باید تأیید شود بسیار مفید است
• ng-invalid-key مثال:ng-invalid-required

اگر ارزش کلاس نمایانگر باشد false، این کلاس‌ها حذف خواهند شد.

مثال

استفاده از CSS استاندارد برای اعمال استایل به عناصر متن‌بندی موثر و نامعتبر:

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

آزمایش کنید