46. النماذج التفاعلية (RF): استخدام FormGroup و FormArray

تتطلب نماذج العالم الحقيقي تجميع عناصر التحكم. FormGroup و FormArray هما حاويات تجميع مثيلات متعددة من FormControl.

1. FormGroup (تجميع عناصر التحكم)

يتتبع FormGroup قيمة وحالة التحقق من صحة مجموعة من مثيلات FormControl. القيمة الإجمالية للنموذج هي مجموعة من أزواج المفتاح-القيمة.

إعداد فئة المكون

نستخدم خدمة FormBuilder (قابلة للحقن) لتبسيط إنشاء الهياكل المتداخلة.

typescript import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class ProfileFormComponent { profileForm: FormGroup;

constructor(private fb: FormBuilder) { this.profileForm = this.fb.group({ firstName: ['', Validators.required], lastName: [''], address: this.fb.group({ // FormGroup متداخل street: [''], city: ['', Validators.required] }) }); } }

ربط القالب

نربط FormGroup الخاص بالمكون بعنصر <form> باستخدام [formGroup] ثم نربط عناصر التحكم باستخدام formControlName.

html

2. FormArray (القوائم الديناميكية)

يدير FormArray مجموعة من عناصر التحكم (أو المجموعات) حيث يكون عدد عناصر التحكم متغيراً (على سبيل المثال، قائمة بأرقام الهواتف، قائمة مهارات ديناميكية).

typescript this.profileForm = this.fb.group({ // ... other controls skills: this.fb.array([this.fb.control('Angular')]) });

// أسلوب لإضافة عنصر تحكم جديد ديناميكياً addSkill() { (this.profileForm.get('skills') as FormArray).push(this.fb.control('')); }

// القالب لعرض المهارات //