50. النماذج الديناميكية باستخدام FormArray

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

1. إنشاء FormArray

نقوم بتعريف FormArray ضمن FormGroup الخاص بنا.

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

export class DynamicFormComponent { dynamicForm: FormGroup;

constructor(private fb: FormBuilder) { this.dynamicForm = this.fb.group({ email: ['', Validators.required], phones: this.fb.array([this.createPhoneGroup()]) // التهيئة بعنصر واحد }); }

// دالة مساعدة لإنشاء FormGroup جديد لإدخال هاتف createPhoneGroup(): FormGroup { return this.fb.group({ type: ['home'], number: ['', Validators.required] }); }

// مُحضِر للوصول بسهولة إلى 'phones' FormArray في القالب get phoneControls() { return this.dynamicForm.get('phones') as FormArray; }

addPhone() { this.phoneControls.push(this.createPhoneGroup()); }

removePhone(index: number) { this.phoneControls.removeAt(index); } }

2. ربط FormArray في القالب

نستخدم formArrayName على الحاوية، و formGroupName على العناصر المتكررة، مستخدمين *ngFor بناءً على مصفوفة phoneControls.controls.

html

  <select formControlName="type">
    <option value="mobile">Mobile</option>
    <option value="home">Home</option>
  </select>
  
  <input type="text" formControlName="number" placeholder="Number">
  
  <button type="button" (click)="removePhone(i)">Remove</button>
</div>