التوصيات التعليمية:

دليل مرجعي AngularJS

تعليمات textarea في AngularJS

التعريف والاستخدام <textarea> AngularJS يغير ng-model سلوك العنصر الافتراضي، ولكن بشرط

الخاصية موجودة.

هم يقدمون ربط البيانات، مما يعني أنهم جزء من نموذج AngularJS، ويمكن تمريرهم وتحديثهم في الدوال DOM وAngularJS. هم يقدمون التحقق. مثال: لديهم 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>

جرب بنفسك

دليل مرجعي AngularJS