وصف الدورة:

تعليمات input في AngularJS

تعريف وطرق الاستخدام <input> AngularJS

سلوك العنصر الافتراضي، ولكن بشرط وجود خاصية ng-model.

هم يقدمون ربط البيانات، مما يعني أنهم جزء من نموذج AngularJS، ويمكن استدعاؤهم وتحديثهم في الدوال DOM وAngularJS. هم يقدمون التحقق. مثال: يحتوي على required <input> العنصر، طالما أنه فارغ، الخاصية $valid حالة سيتم تعيينها false.

هم يقدمون التحكم في الحالة أيضًا. يحفظ AngularJS حالة جميع عناصر الإدخال الحالية.

يوجد للحقول الحقول التالية:

• $untouched الحقول هذا لم يتم لمسه
• $touched الحقول هذا تم لمسه
• $pristine لم يتم تعديل هذا الحقل بعد
• $dirty تم تعديل هذا الحقل
• $invalid محتوى الحقل غير صحيح
• $valid محتوى الحقل صحيح

قيمة كل حالة تمثل قيمة منطقية، وهي true أو false.

مثال

نص框 يحتوي على ربط بيانات:

<input ng-model="myInput">
<p>قيمة النص框 هي:</p>
<h1>{{myInput}}</h1>

تجربة بنفسك

النحو

<input ng-model="name">

استخدام ng-model قيمة الخاصية لاستدعاء عنصر الإدخال.

فئات CSS

في تطبيقات AngularJS <input> العنصر يتم تعيين بعض الفئات. يمكن استخدام هذه الفئات لتحديد النمط الخاص بعنصر الإدخال بناءً على حالة العنصر.

تم إضافة الفئات التالية:

• 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>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>

تجربة بنفسك