| مؤشر الحالة | التعريف المعماري الدقيق | الدلالة البرمجية ووقت الاستخدام |
|---|---|---|
| `touched / untouched` | هل قام المستخدم بتركيز المؤشر على حقل الإدخال ثم مغادرته؟ | تُستخدم لتحديد متى يتم إظهار رسائل الخطأ بعد تفاعل المستخدم |
| `dirty / pristine` | هل تم تعديل قيمة الحقل المحللة مقارنة بالقيمة الأولية؟ | تُستخدم لمعرفة ما إذا قام المستخدم بتغيير بيانات فعلية داخل الحقل |
| `valid / invalid` | هل اجتاز الحقل أو النموذج كافة قيود شروط التحقق (`Validators`)؟ | تُستخدم لتفعيل أو تعطيل زر الإرسال البرمجي في واجهة المستخدم |
لا يقتصر التعامل مع النماذج المعتمدة على القوالب على استقبال البيانات فقط، بل يتطلب فهماً عميقاً لآلية تتبع حالات النماذج والعناصر (Form and Control States). يوفر أنگولر كائنات تحكم وحماية تتبعية تعتمد على مؤشرات وبصمات بصرية وبرمجية (مثل: touched, dirty, valid, pristine)، مما يتيح للمهندس السيطرة الكاملة على تفاعل المستخدم وتجربة الاستخدام (UX).
تتغير قيم هذه المؤشرات تلقائياً وبشكل ديناميكي عبر آليات كشف التغيير (Change Detection) في أنگولر، مما يغنيك عن كتابة دوال استماع معقدة لمتابعة حركة المستخدم على عناصر واجهة المستخدم.
يمكنك ربط متغيرات القالب مباشرة بمرجع توجيه ngModel (مثل #emailRef="ngModel") لاستخدام هذه المؤشرات الحية مباشرة في شروط العرض والتحكم بالتنسيقات البصرية (CSS Classes).
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { FormsModule } from '@angular/forms'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-state-tracking', |
| 7 | standalone: true, |
| 8 | imports: [CommonModule, FormsModule], |
| 9 | template: ` |
| 10 | <div class="tracking-card"> |
| 11 | <h3>مراقبة وتتبع حالات حقل الإدخال لحظياً</h3> |
| 12 | |
| 13 | <div class="field-wrap"> |
| 14 | <label for="emailInput">البريد الإلكتروني:</label> |
| 15 | <input |
| 16 | type="email" |
| 17 | id="emailInput" |
| 18 | name="userEmail" |
| 19 | [(ngModel)]="userEmail" |
| 20 | required |
| 21 | |
| 22 | #emailRef="ngModel" |
| 23 | class="form-control" |
| 24 | [class.error-border]="emailRef.invalid && emailRef.touched" |
| 25 | /> |
| 26 | </div> |
| 27 | |
| 28 | <!-- لوحة عرض حالات الكنترول البرمجية --> |
| 29 | <div class="states-dashboard"> |
| 30 | <p>حالة التلمس (Touched): <span [class.active]="emailRef.touched">{{ emailRef.touched }}</span></p> |
| 31 | <p>حالة التعديل (Dirty): <span [class.active]="emailRef.dirty">{{ emailRef.dirty }}</span></p> |
| 32 | <p>حالة الصلاحية (Valid): <span [class.active]="emailRef.valid">{{ emailRef.valid }}</span></p> |
| 33 | </div> |
| 34 | </div> |
| 35 | `, |
| 36 | styles: [` |
| 37 | .tracking-card { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; border: 1px solid #1e293b; } |
| 38 | .field-wrap { margin-bottom: 16px; display: flex; flex-direction: column; } |
| 39 | .form-control { background: #1e293b; border: 1px solid #334155; padding: 10px; border-radius: 6px; color: #fff; margin-top: 6px; } |
| 40 | .error-border { border-color: #f43f5e !important; } |
| 41 | .states-dashboard { background: #1e293b; padding: 16px; border-radius: 8px; border: 1px solid #334155; display: flex; flex-direction: column; gap: 8px; } |
| 42 | .states-dashboard span { color: #f43f5e; font-weight: bold; } |
| 43 | .states-dashboard span.active { color: #10b981; } |
| 44 | `] |
| 45 | }) |
| 46 | export class StateTrackingComponent { |
| 47 | userEmail = ''; |
| 48 | } |
| 1 | استخدم مؤشر touched بحكمة لإظهار الأخطاء! |
| 2 | لا تقم إطلاقاً بإظهار رسائل التحذير أو الأخطاء للمستخدم بمجرد تحميل الصفحة والنموذج فارغ؛ بل اربط ظهورها دائماً بتحقق مزدوج يجمع بين كون الحقل خطأ وكونه قد تم تلمسه (invalid && touched) لضمان تجربة مستخدم احترافية. |