كيفية الحصول على قيمة جديدة من select في Angular 2 في 2025: أفضل الممارسات

كيفية الحصول على قيمة جديدة من select في Angular 2+: من المبتدئ إلى المحترف

هل سبق لك أن جلست في المساء مع فنجان قهوة، تكتب كوداً في Angular وفجأة أدركت: "تباً، كيف يمكنني التقاط اللحظة التي يختار فيها المستخدم خياراً جديداً في <select>؟" إذا كان الأمر كذلك، فأنت لست وحدك. سؤال "How can I get new selection in 'select' in Angular 2?" على Stack Overflow حصد عشرات الآلاف من المشاهدات. وهذا ليس مفاجئاً: ففي Angular هناك ثلاث طرق لفعل ذلك، وغالباً ما يختلط الأمر على المبتدئين في اختيار الطريقة المناسبة.

في هذه المقالة، سنستعرض جميع الأساليب الحالية باستخدام TypeScript والتي تعمل مع Angular 2+ في عام 2025. ستتعلم كيفية استخدام ngModel، النماذج التفاعلية ومعالج (change)، وستحصل أيضاً على توصيات واضحة حول متى وماذا تستخدم. هيا بنا!

المشكلة: لماذا select البسيط في Angular ليس مجرد HTML عادي؟

في HTML العادي، كنت ستكتب:

<select id="city" onchange="handleChange(event)">\n  <option value="msk">موسكو</option>\n  <option value="spb">سانت بطرسبرغ</option>\n</select>

وستتلقى الدالة handleChange(event) الحدث. في Angular، الأمر أكثر تعقيداً قليلاً (ولكنه أكثر مرونة). لا تحتاج فقط إلى "التقاط النقرة"، بل تحتاج إلى ربط البيانات بشكل صحيح، ومعالجة التغيير، وتجنب الأخطاء الشائعة مثل فقدان التفاعلية أو إعادة التصيير غير الضرورية.

دعنا نستعرض ثلاث طرق رئيسية ستستخدمها في عام 2025.

الطريقة 1: التقليدية (ngModel + (change)) — بسيطة وموثوقة

هذا الأسلوب مناسب للنماذج البسيطة حيث لا تحتاج إلى تحقق معقد. تقوم بربط select بمتغير عبر [(ngModel)] وتستمع إلى الحدث (change).

مثال الكود

// app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  selectedCity: string = '';\n  cities: string[] = ['موسكو', 'سانت بطرسبرغ', 'قازان'];\n\n  onCityChange(newCity: string): void {\n    console.log('المدينة المختارة:', newCity);\n    // هنا يمكنك إجراء طلب API أو تغيير أجزاء أخرى من واجهة المستخدم\n  }\n}

<!-- app.component.html -->\n<select [(ngModel)]="selectedCity" (change)="onCityChange(selectedCity)">\n  <option value="" disabled>اختر مدينة</option>\n  <option *ngFor="let city of cities" [value]="city">{{ city }}</option>\n</select>

مهم! في Angular 2+، يتم تشغيل الحدث (change) بعد تحديث النموذج. لذلك، selectedCity داخل onCityChange يحتوي بالفعل على القيمة الجديدة. إذا كنت بحاجة إلى القيمة القديمة — فاحفظها في متغير منفصل قبل التغيير.

الطريقة 2: النماذج التفاعلية — القوة والتحكم

إذا كنت تبني تطبيقاً جاداً مع التحقق، أو حقول ديناميكية، أو اشتراكات — استخدم النماذج التفاعلية. هذا هو المعيار الصناعي في عام 2025.

الخطوة 1: استيراد ReactiveFormsModule

// app.module.ts\nimport { ReactiveFormsModule } from '@angular/forms';\n\n@NgModule({\n  imports: [\n    ReactiveFormsModule\n  ]\n})\nexport class AppModule { }

الخطوة 2: إنشاء FormControl والاشتراك في التغييرات

// app.component.ts\nimport { Component, OnInit } from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent implements OnInit {\n  cityControl = new FormControl('');\n  cities: string[] = ['موسكو', 'سانت بطرسبرغ', 'قازان'];\n\n  ngOnInit(): void {\n    // الاشتراك في تغييرات القيمة\n    this.cityControl.valueChanges.subscribe((newCity: string) => {\n      console.log('المدينة الجديدة من النموذج التفا