الربط ثنائي الاتجاه باستخدام ngModel
زامنوا مدخلات النموذج مع حالة المكوّن
الربط ثنائي الاتجاه باستخدام ngModel درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
ما الربط ثنائي الاتجاه؟
يحافظ الربط ثنائي الاتجاه على مزامنة قيمة بين المكوّن والعرض: فتحديث أحدهما يحدّث الآخر. وتُسمّى صيغته صيغة الموزة داخل الصندوق [()].
الموزة داخل الصندوق
الصيغة المدمجة [(...)] هي اختصار لربط خاصية مع ربط حدث. فالأقواس المربعة هي الصندوق، والأقواس المستديرة هي الموزة.
<!-- shorthand -->
<input [(ngModel)]="name">
<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">التعرّف إلى ngModel
إنّ ngModel توجيه للربط ثنائي الاتجاه في عناصر النماذج مثل حقول الإدخال والقوائم المنسدلة ومناطق النص.
<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>استيراد FormsModule
لاستخدام ngModel، يجب استيراد FormsModule في المكوّن المستقل أو NgModule.
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-demo",
standalone: true,
imports: [FormsModule],
template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
name = "";
}ربط حقل إدخال نصي
أثناء كتابة المستخدم، تتحدّث الخاصية المرتبطة فورًا، كما يؤدي تغيير الخاصية في الشيفرة إلى تحديث حقل الإدخال.
<input [(ngModel)]="email">
<p>Current: {{ email }}</p>ربط مربع اختيار
يعمل ngModel مع مربعات الاختيار، ويربطها بقيمة منطقية.
<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>
// component
agreed = false;ربط قائمة منسدلة
مع عنصر القائمة المنسدلة، يربط ngModel قيمة الخيار المحدد.
<select [(ngModel)]="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>ngModel داخل النماذج
داخل نموذج موجّه بالقالب، أضف سمة name حتى يسجّل Angular عنصر التحكم في النموذج.
<form #f="ngForm">
<input name="city" [(ngModel)]="city">
</form>ngModel مستقل
خارج النموذج، يعمل ngModel بمفرده ما دام FormsModule مستوردًا؛ ولا تكون name مطلوبة.
<input [(ngModel)]="search">متى تستخدم ngModel
يُعدّ ngModel مناسبًا للنماذج البسيطة الموجّهة بالقالب. أما للتحقق المعقّد والنماذج الديناميكية، فغالبًا ما يُفضَّل استخدام النماذج التفاعلية.
التفاعل مع التغييرات
إذا كنت تحتاج فقط إلى التفاعل مع التغييرات، فاربط حدث (ngModelChange) مباشرةً بدلًا من استخدام الربط ثنائي الاتجاه الكامل.
<input [ngModel]="q" (ngModelChange)="onSearch($event)">تحقّق سريع
اختبر مدى فهمك للربط ثنائي الاتجاه باستخدام ngModel.
مراجعة
يستخدم الربط ثنائي الاتجاه صيغة الموزة داخل الصندوق [(ngModel)]، التي تجمع بين ربط الخاصية وربط الحدث. استورد FormsModule لاستخدامها مع حقول الإدخال ومربعات الاختيار والقوائم المنسدلة.
الأسئلة الشائعة
هل درس «الربط ثنائي الاتجاه باستخدام ngModel» مجاني؟
نعم — نص درس «الربط ثنائي الاتجاه باستخدام ngModel» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «الربط ثنائي الاتجاه باستخدام ngModel»؟
زامنوا مدخلات النموذج مع حالة المكوّن تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «الربط ثنائي الاتجاه باستخدام ngModel»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مراجعة ربط الخصائص والأحداث
- الربط ثنائي الاتجاه باستخدام ngModel
- مدخلات الإشارات model()
- خصائص مخصّصة قابلة للربط ثنائي الاتجاه