45. النماذج التفاعلية (RF) الإعداد و FormControl

توفر النماذج التفاعلية (Reactive Forms) نهجاً يعتمد على النموذج (model-driven) حيث يتم تحديد هيكل النموذج والتحقق من صحته بشكل صريح في فئة المكون، مما يوفر تحكماً أكبر وقابلية للتوسع وقابلية للاختبار.

1. استيراد ReactiveFormsModule

تأكد من استيراد هذه الوحدة في AppModule أو وحدة الميزات الخاصة بك.

2. استخدام FormControl

FormControl هو اللبنة الأساسية للنماذج التفاعلية. يمثل حقلاً واحداً للإدخال وحالته (القيمة، الصلاحية).

إنشاء مثيلات عناصر التحكم

نقوم عادة بإنشاء مثيلات عناصر التحكم في مُنشئ المكون أو ngOnInit.

typescript import { FormControl } from '@angular/forms';

export class ReactiveSetupComponent implements OnInit { // 1. الإعلان عن مثيل FormControl usernameControl: FormControl | null = null;

ngOnInit(): void { // 2. إنشاء مثيل عنصر التحكم: القيمة الأولية، مصفوفة أدوات التحقق this.usernameControl = new FormControl('Default Name', Validators.required); } }

3. ربط عنصر التحكم بالقالب

نربط مثيل FormControl للمكون بإدخال HTML باستخدام ربط الخاصية [formControl].

html

التغييرات التفاعلية (Observables)

نظراً لأن النماذج التفاعلية تعتمد على النموذج، يمكننا الاشتراك في التغييرات على عنصر التحكم، والتعامل مع بيانات النموذج كتيار مستمر (Observable).

typescript ngOnInit(): void { // ... instantiation this.usernameControl.valueChanges.subscribe(newValue => { console.log('Username changed to:', newValue); }); }