أنماط FormBuilder
أنشئ نماذج معقدة باستخدام FormBuilder
أنماط FormBuilder درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
تعليمة برمجية أقل تكرارًا
إن FormBuilder خدمة تنشئ مجموعات النماذج وعناصر التحكم والمصفوفات باستخدام صياغة موجزة، فتتجنب استدعاءات new FormControl(...) المتكررة.
حقن FormBuilder
احقنوه في المكوّن.
private fb = inject(FormBuilder);إنشاء مجموعة
تأخذ fb.group كائنًا يربط الأسماء بالقيم الأولية، مع إمكانية إضافة أدوات التحقق.
form = this.fb.group({
email: ['', Validators.required],
age: [0]
});صفيفة القيمة وأدوات التحقق
يمكن أن يكون كل إدخال صفيفة: [initialValue, syncValidators, asyncValidators].
password: ['', [Validators.required, Validators.minLength(8)]]المنشئ Nonnullable
ينشئ fb.nonNullable عناصر تحكم لا تكون null مطلقًا، ولذلك تعيد reset القيمة الأولية بدلًا من null.
form = this.fb.nonNullable.group({
name: '',
active: true
});أهمية nonNullable
مع nonNullable، تُحذف | null من أنواع القيم، وتعيد reset() القيمة الافتراضية الأصلية، وهو ما تحتاجونه عادةً.
إنشاء المصفوفات
تنشئ fb.array كائن FormArray؛ ويمكن دمجها مع fb.group لإنشاء مصفوفات من المجموعات.
form = this.fb.group({
items: this.fb.array([])
});مساعد لعناصر المصفوفة
تحافظ دالة مصنع على اتساق إنشاء عناصر المصفوفة.
newItem() {
return this.fb.group({
label: [''],
qty: [1]
});
}إضافة العناصر
أضيفوا المجموعة المُنشأة إلى المصفوفة باستخدام push.
get items() {
return this.form.controls.items as FormArray;
}
add() { this.items.push(this.newItem()); }إعداد صريح لعنصر التحكم
لتطبيق nonNullable على عنصر تحكم واحد، مرّروا كائن خيارات بدلًا من صفيفة.
token: this.fb.control('', { nonNullable: true })متى تستخدمون FormBuilder
استخدموا FormBuilder لتحسين قابلية القراءة في النماذج الكبيرة. وتُعد واجهة برمجة new FormControl الصريحة مكافئة لها، وقد تكون أوضح أحيانًا لعناصر التحكم المنفردة.
اختبار سريع
اختبروا مدى فهمكم لأنماط FormBuilder.
مراجعة
تعلّمتم أن FormBuilder (fb.group وfb.control وfb.array) يقلل التعليمات البرمجية المتكررة، وأن الصفائف تحمل القيمة وأدوات التحقق، وأن fb.nonNullable ينتج عناصر تحكم غير قابلة لأن تكون null، وتعيد عملية reset قيمها الافتراضية.
الأسئلة الشائعة
هل درس «أنماط FormBuilder» مجاني؟
نعم — نص درس «أنماط FormBuilder» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «أنماط FormBuilder»؟
أنشئ نماذج معقدة باستخدام FormBuilder تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «أنماط FormBuilder»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.