43. نماذج القوالب (TDF): استخدام NgModel وعناصر التحكم في النموذج
ngModel هو المفتاح لإنشاء عناصر تحكم النموذج في TDF. عند استخدامه داخل وسم <form>، فإنه يربط الإدخال تلقائياً بآلية نماذج Angular.
أهمية سمة name
في TDF، يجب أن يحتوي كل إدخال يستخدم ngModel على سمة name فريدة. هذه هي الطريقة التي يسجل بها Angular عنصر تحكم الإدخال ضمن مجموعة NgForm الأصل.
html
<input type="text" name="firstName" [(ngModel)]="user.firstName">
حالات التحكم في النموذج (#control="ngModel")
عن طريق تعيين متغير إشارة إلى القالب لـ ngModel (على سبيل المثال، #emailCtrl="ngModel")، يمكننا الوصول إلى حالة عنصر التحكم الفردي في القالب. هذه الحالات ضرورية لملاحظات التحقق من الصحة:
| خاصية الحالة | الوصف |
|---|---|
valid | صحيح إذا تجاوزت قيمة الإدخال جميع قواعد التحقق من الصحة. |
invalid | صحيح إذا فشلت قيمة الإدخال في أي قاعدة تحقق من الصحة. |
pristine | صحيح إذا لم يقم المستخدم بتغيير القيمة بعد. |
dirty | صحيح إذا قام المستخدم بتغيير القيمة. |
untouched | صحيح إذا لم يقم المستخدم بترك حقل الإدخال بعد. |
touched | صحيح إذا قام المستخدم بترك حقل الإدخال. |
عرض ملاحظات حالة التحكم
html <input type="email" name="email" [(ngModel)]="user.email" required email #emailCtrl="ngModel">
Email is required.
Must be a valid email format.
<input [ngClass]="{ 'is-invalid': emailCtrl.invalid && emailCtrl.touched }" ... >