| الجانب المعماري | الخصائص والسمات التفصيلية | دلالة الاستخدام في التطبيق |
|---|---|---|
| مكان تعريف الحالة | يتم إدارة وتخزين الحالة برمجياً وخلف الكواليس بواسطة توجيهات أنگولر في القالب | تقليل كتابة كود الـ TypeScript وجعل القالب مسؤولاً عن مظهر وتتبع القيم |
| تجهيز وبناء النموذج | تلقائي وسريع بمجرد إضافة سمات مثل `ngModel` و `name` لعناصر الإدخال | مناسب جداً للنماذج القصيرة مثل تسجيل الدخول والبحث السريع |
| طريقة التعامل مع الأخطاء | تتم عبر تتبع حالات العناصر مباشرة في القالب مثل `touched` و `invalid` | يسهل إظهار رسائل الخطأ البصرية للمستخدم لحظياً وبأقل جهد برمجي |
يُعد التعامل مع نماذج الإدخال جزءاً أساسياً لتطبيقات الويب. يقدم أنگولر نهجين رئيسيين للنماذج، أحدهما هو النماهج المعتمدة على القوالب (Template-Driven Forms). يعتمد هذا النمط على بناء هيكل النموذج والتحقق من صحته بشكل كبير داخل ملف القالب (Template) باستخدام التوجيهات المدمجة مثل ngModel، مما يجعله خياراً مثالياً وسريعاً للنماذج البسيطة وغير المعقدة.
يقوم أنجولر تلقائياً بإنشاء كائنات تمثيل النموذج (FormGroup و FormControl) خلف الكواليس بناءً على ما تكتبه في القالب HTML، مما يقلل من حجم الكود المكتوب في ملف الـ TypeScript.
تعتمد هذه النماذج بشكل مباشر على ربط البيانات ثنائي الاتجاه باستخدام توجيه [(ngModel)], مما يسهل مزامنة قيم المدخلات مع المتغيرات في صنف المكون لحظياً.
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { FormsModule } from '@angular/forms'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-template-form', |
| 7 | standalone: true, |
| 8 | imports: [CommonModule, FormsModule], |
| 9 | template: ` |
| 10 | <div class="form-container"> |
| 11 | <h3>نموذج الدخول المعتمد على القوالب (Template-Driven)</h3> |
| 12 | |
| 13 | <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)"> |
| 14 | <div class="input-group"> |
| 15 | <label for="username">اسم المستخدم:</label> |
| 16 | <input |
| 17 | type="text" |
| 18 | id="username" |
| 19 | name="username" |
| 20 | ngModel |
| 21 | required |
| 22 | #username="ngModel" |
| 23 | class="form-input" |
| 24 | /> |
| 25 | <div *ngIf="username.invalid && username.touched" class="error-msg"> |
| 26 | اسم المستخدم مطلوب! |
| 27 | </div> |
| 28 | </div> |
| 29 | |
| 30 | <button type="submit" [disabled]="userForm.invalid" class="submit-btn">إرسال النموذج</button> |
| 31 | </form> |
| 32 | </div> |
| 33 | `, |
| 34 | styles: [` |
| 35 | .form-container { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; border: 1px solid #1e293b; } |
| 36 | .input-group { margin-bottom: 16px; display: flex; flex-direction: column; } |
| 37 | .form-input { background: #1e293b; border: 1px solid #334155; padding: 10px; border-radius: 6px; color: #fff; margin-top: 6px; } |
| 38 | .error-msg { color: #f43f5e; font-size: 12px; margin-top: 4px; font-weight: bold; } |
| 39 | .submit-btn { background: #38bdf8; color: #090d16; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; cursor: pointer; } |
| 40 | .submit-btn:disabled { background: #475569; cursor: not-allowed; } |
| 41 | `] |
| 42 | }) |
| 43 | export class TemplateDrivenLoginComponent { |
| 44 | onSubmit(form: any) { |
| 45 | if (form.valid) { |
| 46 | console.log('بيانات النموذج المرسلة:', form.value); |
| 47 | } |
| 48 | } |
| 49 | } |
⚠️ تحذير
احذر من نسيان استيراد FormsModule في المكونات المستقلة (Standalone)! نظراً لأن توجيهات النماذج المعتمدة على القوالب (ngModel) تنتمي إلى FormsModule, يجب عليك التأكد من استيرادها صراحة في مصفوفة imports الخاصة بالمكون وإلا ستتوقف الميزة عن العمل.