خطأ formGroup في Angular: كيفية إصلاحه في 5 دقائق

«Can't bind to 'formGroup' since it isn't a known property of 'form'» — ألم مألوف؟

إذا سبق لك أن حاولت إنشاء نموذج في Angular ورأيت في وحدة تحكم المتصفح رسالة حمراء Can't bind to 'formGroup' since it isn't a known property of 'form' — فأنت لست وحدك. هذا الخطأ يدخل ضمن أكثر 5 أسئلة شيوعاً على Stack Overflow بخصوص Angular. آلاف المطورين (وأنا منهم) أضاعوا ساعات في محاولة فهم ما الخطأ.

الخبر الجيد: السبب دائمًا تقريبًا واحد، ويتم إصلاحه في دقيقتين. الخبر السيئ: إذا كنت لا تعرف أين تبحث، فقد تعيد كتابة النموذج بالكامل ولا تجد جذر المشكلة.

في هذه المقالة سنشرح:

\n
• لماذا يظهر الخطأ formGroup unknown property
\n
• كيفية استيراد ReactiveFormsModule بشكل صحيح
\n
• ثلاث طرق لإصلاح الخطأ مع أمثلة كود بلغة TypeScript
\n
• كيفية تجنب المشكلة في المستقبل
\n

هيا بنا! 🚀

ماذا يعني خطأ «Can't bind to 'formGroup'»؟

Angular هو إطار عمل ذو كتابة صارمة. عندما تكتب في القالب:

<form [formGroup]="myForm">

يبحث Angular عن توجيه (directive) يمكنه معالجة السمة formGroup. إذا لم يتم العثور على هذا التوجيه، يظهر الإطار خطأ: «Can't bind to 'formGroup' since it isn't a known property of 'form'».

هذا يشبه الموقف عندما تحاول إدخال USB في المنفذ ولكن بالجهة الخاطئة. يبدو أن كل شيء مناسب، لكن نقاط الاتصال غير متطابقة. Angular ببساطة لا يعرف ماذا يفعل بـ formGroup لأن الوحدة المطلوبة غير متصلة.

السبب الرئيسي: عدم وجود ReactiveFormsModule

التوجيه formGroup موجود في الوحدة ReactiveFormsModule. إذا لم تقم باستيرادها في AppModule الخاص بك (أو في الوحدة التي تستخدم المكون)، فلن يتمكن Angular من التعرف على السمة.

إليك كيف يبدو السيناريو النموذجي للخطأ:

\n
1. تقوم بإنشاء مكون مع نموذج
\n
2. في TypeScript تعرّف FormGroup
\n
3. في القالب تستخدم [formGroup]="myForm"
\n
4. تحصل على الخطأ في وحدة التحكم
\n

كيفية الإصلاح: مثال كامل للكود بلغة TypeScript

دعنا ننشئ نموذجًا عمليًا خطوة بخطوة ونشرح كل خطوة.

الخطوة 1. إنشاء مكون مع نموذج

أولاً، نحدد النموذج في ملف TypeScript الخاص بالمكون:

// my-form.component.ts\nimport { Component, OnInit } from '@angular/core';\nimport { FormGroup, FormControl, Validators } from '@angular/forms';\n\n@Component({\n  selector: 'app-my-form',\n  templateUrl: './my-form.component.html',\n  styleUrls: ['./my-form.component.css']\n})\nexport class MyFormComponent implements OnInit {\n  myForm!: FormGroup;\n\n  ngOnInit(): void {\n    this.myForm = new FormGroup({\n      name: new FormControl('', Validators.required),\n      email: new FormControl('', [Validators.required, Validators.email])\n    });\n  }\n\n  onSubmit(): void {\n    if (this.myForm.valid) {\n      console.log('تم إرسال النموذج:', this.myForm.value);\n    }\n  }\n}

الخطوة 2. القالب الصحيح (HTML)

في القالب نستخدم التوجيه formGroup:

<!-- my-form.component.html -->\n<form [formGroup]="myForm" (ngSubmit)="onSubmit()">\n  <div>\n    <label for="name">الاسم:</label>\n    <input id="name" type="text" formControlName="name">\n  </div>\n\n  <div>\n    <label for="email">البريد الإلكتروني:</label>\n    <input id="email" type="email" formControlName="email">\n  </div>\n\n  <button type="submit" [disabled]="!myForm.valid">إرسال</button>\n</form>