FormArray والحقول الديناميكية
أضف عناصر التحكم في النماذج وأزلها أثناء التشغيل
FormArray والحقول الديناميكية درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
مجموعات الحقول الديناميكية
تحتوي بعض النماذج على عدد متغير من الحقول، مثل قائمة أرقام الهواتف أو بنود الفاتورة. تدير FormArray مجموعة مرتبة وقابلة للتوسّع من عناصر التحكم.
إنشاء FormArray
تحتوي FormArray على مصفوفة من عناصر التحكم أو المجموعات.
const phones = new FormArray([
new FormControl(''),
new FormControl('')
]);داخل FormGroup
ضمّنوا المصفوفة داخل مجموعة أصلية حتى تصبح جزءًا من قيمة النموذج بالكامل.
const form = new FormGroup({
name: new FormControl(''),
phones: new FormArray<FormControl<string>>([])
});إضافة عناصر التحكم
استدعوا push لإلحاق عنصر تحكم جديد ديناميكيًا.
addPhone() {
this.phones.push(new FormControl('', { nonNullable: true }));
}إزالة عناصر التحكم
استخدموا removeAt(index) لحذف عنصر تحكم محدد.
removePhone(i: number) {
this.phones.removeAt(i);
}العرض باستخدام @for
كرّروا عناصر التحكم في المصفوفة داخل القالب، واربطوا كل عنصر باستخدام فهرسه مع formControlName.
<div formArrayName="phones">
@for (ctrl of phones.controls; track $index) {
<input [formControlName]="$index" />
}
</div>توجيه formArrayName
يربط formArrayName كتلة في القالب بالمصفوفة، ويستخدم formControlName الداخلي الفهرس الرقمي.
مصفوفات المجموعات
للعناصر الأكثر تفصيلًا، خزّنوا كائنات FormGroup في المصفوفة، مثل جهة اتصال تحتوي على اسم ورقم.
const contacts = new FormArray<FormGroup>([]);
contacts.push(new FormGroup({
label: new FormControl(''),
number: new FormControl('')
}));عرض عناصر المجموعات
استخدموا formGroupName مع الفهرس لكل مجموعة في المصفوفة.
@for (g of contacts.controls; track $index) {
<div [formGroupName]="$index">
<input formControlName="label" />
<input formControlName="number" />
</div>
}قراءة القيمة
تكون قيمة المصفوفة مصفوفة عادية مرتبة، وتعكس عناصر التحكم الحالية.
const list = this.phones.value; // string[]تفريغ المصفوفة
تزيل clear() جميع عناصر التحكم دفعة واحدة، وهو أمر مفيد عند إعادة تعيين قسم ديناميكي.
this.phones.clear();اختبار سريع
اختبروا مدى فهمكم لـ FormArray.
مراجعة
تعلّمتم أن FormArray تدير مجموعة ديناميكية ومرتبة من عناصر التحكم أو المجموعات، باستخدام push وremoveAt وclear، وتُعرض باستخدام formArrayName مع formControlName/formGroupName المعتمدين على الفهرس.
الأسئلة الشائعة
هل درس «FormArray والحقول الديناميكية» مجاني؟
نعم — نص درس «FormArray والحقول الديناميكية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «FormArray والحقول الديناميكية»؟
أضف عناصر التحكم في النماذج وأزلها أثناء التشغيل تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «FormArray والحقول الديناميكية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- النماذج التفاعلية ذات الأنواع
- FormArray والحقول الديناميكية
- المدققات غير المتزامنة
- أنماط FormBuilder