تعليمات نموذج AngularJS

التعريف والاستخدام

تعديلات AngularJS <form> سلوك العنصر الافتراضي.

يتم منح بعض الخصائص لنموذج تطبيق AngularJS. هذه الخصائص تصف حالة النموذج الحالية.

يوجد للنموذج الحالي الحالات التالية:

• $pristine لم يتم تعديل أي حقل
• $dirty تم تعديل حقل واحد أو أكثر
• $invalid محتوى النموذج غير صالح
• $valid محتوى النموذج صالح
• $subscribed تم إرسال النموذج

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

إذا لم يتم تحديد خاصية action، فإن نموذج AngularJS سيمنع العملية الافتراضية، أي إرسال النموذج إلى الخادم.

مثال

مثال 1

فقط إذا كان الحقل المطلوب فارغًا، لن يتم اعتبار "حالة الصحة" للنموذج "صحيح":

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>حالة صحة النموذج هي:</p>
<h1>{{myForm.$valid}}</h1>

جرب بنفسك

مثال 2

تطبيق النمط على النموذج غير المحرر (الأصلي) والنموذج المحرر:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>

جرب بنفسك

النحو

<form name="اسم النموذج</form>

باستخدام اسم لإشارة إلى النموذج باستخدام قيمة الخاصية.

فئات CSS

يُمنح نموذج AngularJS بعض الفئات داخل التطبيق. يمكن استخدام هذه الفئات لضبط نمط النموذج بناءً على حالته.

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

• ng-pristine لا يوجد حقل لم يتم تعديله بعد
• ng-dirty تم تعديل حقل واحد أو أكثر
• ng-valid محتوى النموذج صالح
• ng-invalid محتوى النموذج غير صالح
• ng-valid-key تحقق من مفتاح واحد في كل مرة. مثلاً:ng-valid-required، يكون مفيدًا جدًا عند وجود أكثر من عنصر يجب التحقق منه
• ng-invalid-key مثلاً:ng-invalid-required

إذا كان القيمة الممثلة للفئة false، إذا كان ذلك الحال، فإن هذه الفئات سيتم حذفها.