| جانب المزامنة | الربط أحادي الاتجاه | الربط ثنائي الاتجاه (`[(ngModel)]`) |
|---|---|---|
| اتجاه تدفق القيم | أحادي الاتجاه إما من المكون للقالب أو العكس | تدفق تبادلي فوري ولحظي بين الحقل والمتغير |
| الصيغة المستخدمة | استخدام الأقواس المربعة `[...]` أو الدائرية `(...)` منفصلة | استخدام الصيغة المدمجة المعروفة بصيغة الموز `[(...)]` |
| الاعتمادات المطلوبة | لا تتطلب وحدات إضافية معقدة | تتطلب استيراد صنف `FormsModule` وتوفير سمة `name` |
يُعد ربط البيانات ثنائي الاتجاه (Two-Way Data Binding) عبر توجيه ngModel الأداة الأسرع لمزامنة قيم الحقول مع متغيرات صنف الـ TypeScript في النماذج المعتمدة على القوالب (Template-Driven Forms). يدمج هذا التوجيه بين إرسال الخاصية ([value]) والاستماع للحدث ((ngModelChange)) في تعبير برمجي واحد متكامل ([(ngModel)]).
يختصر تعبير [(ngModel)] كتابة كود الاستماع والتحديث اليدوي، مما يجعل قراءة القوالب أسرع وأكثر وضوحاً في المشاريع المصغرة.
يتطلب استخدام ngModel بشكل إلزامي وجود سمة name مميزة لعنصر الإدخال، ووجود FormsModule في مصفوفة imports الخاصة بالمكون المستقل (Standalone Component).
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { FormsModule } from '@angular/forms'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-two-way-core', |
| 7 | standalone: true, |
| 8 | imports: [CommonModule, FormsModule], |
| 9 | template: ` |
| 10 | <div class="core-card"> |
| 11 | <h3>نموذج الربط ثنائي الاتجاه الأساسي</h3> |
| 12 | |
| 13 | <div class="field-group"> |
| 14 | <label for="itemTitle">عنوان العنصر:</label> |
| 15 | <input |
| 16 | type="text" |
| 17 | id="itemTitle" |
| 18 | name="itemTitle" |
| 19 | [(ngModel)]="itemTitle" |
| 20 | class="core-input" |
| 21 | /> |
| 22 | </div> |
| 23 | |
| 24 | <div class="output-preview"> |
| 25 | <p>القيمة الحالية المعروضة: <strong>{{ itemTitle }}</strong></p> |
| 26 | </div> |
| 27 | </div> |
| 28 | `, |
| 29 | styles: [` |
| 30 | .core-card { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; border: 1px solid #1e293b; } |
| 31 | .field-group { margin-bottom: 16px; display: flex; flex-direction: column; } |
| 32 | .core-input { background: #1e293b; border: 1px solid #334155; padding: 10px; border-radius: 6px; color: #fff; margin-top: 6px; } |
| 33 | .output-preview { background: #1e293b; padding: 14px; border-radius: 8px; border: 1px solid #334155; color: #38bdf8; } |
| 34 | `] |
| 35 | }) |
| 36 | export class TwoWayCoreComponent { |
| 37 | itemTitle = 'مشروع أنگولر الهيكلي'; |
| 38 | } |
⚠️ تحذير
تجنب الاعتماد الكلي على الربط الثنائي في النماذج الضخمة! استخدام [(ngModel)] بشكل مكثف على مستوى مئات الحقول يؤدي لاستهلاك موارد الكشف عن التغيير (Change Detection), ويفضل حينها الانتقال إلى النماذج التفاعلية (Reactive Forms).