13. ربط البيانات ثنائي الاتجاه [(ngModel)]

يقوم ربط البيانات ثنائي الاتجاه بمزامنة تدفق البيانات بين فئة المكون وعرض القالب في وقت واحد. التغييرات في المكون تحدث العرض، والتغييرات في العرض تحدث نموذج المكون (model).

صيغة 'الموزة في صندوق' [()]

يستخدم Angular صيغة [()] الخاصة، والتي غالباً ما تسمى 'الموزة في صندوق'، للدلالة على الربط ثنائي الاتجاه. إنها سكر نحوي (syntactic sugar) لدمج ربط الخاصية ([]) وربط الأحداث (()):

html [(ngModel)]="dataProperty"

// مكافئ لـ:

[ngModel]="dataProperty" (ngModelChange)="dataProperty = $event"

المتطلبات: FormsModule

يستخدم الربط ثنائي الاتجاه بشكل أساسي توجيه ngModel، وهو جزء من FormsModule في Angular. يجب عليك استيراد هذه الوحدة إلى وحدة NgModule الخاصة بك لاستخدام ngModel.

تحديث app.module.ts:

typescript import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; // 1. استيراد FormsModule

@NgModule({ imports: [BrowserModule, FormsModule], // 2. إضافتها إلى مصفوفة imports // ... }) export class AppModule { }

مثال على الربط ثنائي الاتجاه

فئة المكون:

typescript export class LoginComponent { username: string = 'initial_user'; }

القالب:

html

User Profile Editor

<input type="text" [(ngModel)]="username">

Model value is: {{ username }}

يُعد الربط ثنائي الاتجاه مريحاً للغاية لـ نماذج إدخال البيانات البسيطة، ولكن بالنسبة للتطبيقات المعقدة، وخاصة النماذج الكبيرة، توفر النماذج التفاعلية (Reactive Forms) (التي سيتم تناولها لاحقاً) المزيد من التحكم.