41. مقدمة إلى النماذج (Forms) في Angular
يُعد التعامل مع مدخلات المستخدم عبر النماذج حجر الزاوية في تطوير الويب الحديث. يوفر Angular نهجين متميزين لبناء النماذج والتحقق من صحتها:
- النماذج الموجهة بالقوالب (Template-Driven Forms - TDF): تتم إدارة منطق النموذج بشكل أساسي في القالب باستخدام التوجيهات (
ngModel,ngForm). وهي أبسط للنماذج الأساسية. - النماذج التفاعلية (Reactive Forms - RF): تتم إدارة منطق النموذج برمجياً في فئة المكون باستخدام كائنات تحكم نموذج صريحة (
FormControl,FormGroup). وهي مثالية للنماذج المعقدة أو الديناميكية أو التي تحتاج إلى اختبارات مكثفة.
مسؤوليات النموذج المشتركة
بغض النظر عن النهج، تتعامل نماذج Angular مع ثلاث مهام رئيسية:
- نموذج البيانات (Data Model): تتبع قيمة بيانات النموذج ومدخلاته.
- تتبع التغيير (Change Tracking): مراقبة حالة النموذج (على سبيل المثال،
pristine[نقي]،dirty[معدّل]،touched[ملموس]). - التحقق من الصحة (Validation): فحص مدخلات المستخدم مقابل القواعد المطلوبة (على سبيل المثال،
required،email، القواعد المخصصة).
إعداد النموذج
توجد النماذج في وحدة منفصلة. يجب عليك استيراد الوحدة المناسبة إلى وحدة الميزات الخاصة بك أو AppModule.
- لاستخدام النماذج الموجهة بالقوالب (TDF)، قم باستيراد
FormsModule. - لاستخدام النماذج التفاعلية (RF)، قم باستيراد
ReactiveFormsModule.
typescript // app.module.ts import { FormsModule } from '@angular/forms'; // للنماذج الموجهة بالقوالب import { ReactiveFormsModule } from '@angular/forms'; // للنماذج التفاعلية
@NgModule({ imports: [BrowserModule, FormsModule, ReactiveFormsModule], // ... }) export class AppModule { }
سنخصص الآن دروساً منفصلة لإتقان كلا نهجي النماذج الموجهة بالقوالب والتفاعلية.