MatFormFieldControl: تحليل الخطأ مرة واحدة وإلى الأبد

مقدمة: لماذا يصرخ نموذج Angular الخاص بك بخطأ؟

هل سبق لك أن واجهت موقفًا: تكتب نموذجًا جميلاً باستخدام Angular Material، ويبدو كل شيء مثاليًا، ولكن فجأة تظهر وحدة تحكم المتصفح رسالة:

mat-form-field must contain a MatFormFieldControl

أو، إذا كنت تستخدم الوضع الصارم لـ TypeScript، فقد يظهر شيء مثل:

Error: mat-form-field must contain a MatFormFieldControl. Did you forget to add a directive that implements MatFormFieldControl?

هذا أحد أشهر الأخطاء على Stack Overflow (آلاف المشاهدات!)، واليوم سنقوم بتحليله بالكامل. ستتعلم ليس فقط كيفية إصلاح هذه المشكلة، ولكن أيضًا لماذا تحدث. والأهم من ذلك، ستتعلم كيفية إنشاء عناصر التحكم الخاصة بك لـ Angular Material، إذا كان MatInput القياسي لا يناسبك.

هيا بنا! 🚀

ما هو MatFormFieldControl ولماذا هو مطلوب؟

قبل معالجة الخطأ، دعنا نفهم تشريح Angular Material. mat-form-field هو حاوية تضيف تنسيق Material Design (تسمية، تسطير، تلميحات، أخطاء). لكنه في حد ذاته لا يعرض أي شيء. يحتاج إلى "طفل" - توجيه أو مكون يقوم بتنفيذ الواجهة MatFormFieldControl.

تصف هذه الواجهة (أو الفئة المجردة) كيفية تفاعل عنصر التحكم مع النموذج: كيفية الحصول على القيمة، وكيفية إظهار الخطأ، وكيفية معالجة التركيز. التنفيذ القياسي هو MatInput. إذا كتبت:

<mat-form-field>\n  <input matInput placeholder="الاسم">\n</mat-form-field>

— فإن التوجيه matInput يقوم تلقائيًا بتنفيذ MatFormFieldControl.

يحدث الخطأ عندما لا يعثر Angular على أي عنصر فرعي بهذا التنفيذ. على سبيل المثال:

<mat-form-field>\n  <input placeholder="الاسم"> <!-- لا يوجد matInput! -->\n</mat-form-field>

أو عندما تحاول استخدام مكون مخصص لم يقم بتوصيل الواجهة.

الأسباب النموذجية للخطأ (وكيفية إصلاحها)

1. نسيت إضافة التوجيه matInput

السبب الأكثر تافهًا. أنت ببساطة لم تحدد matInput على العنصر <input>.

غير صحيح:

<mat-form-field>\n  <input placeholder="البريد الإلكتروني">\n</mat-form-field>

صحيح:

<mat-form-field>\n  <input matInput placeholder="البريد الإلكتروني">\n</mat-form-field>

تحقق أيضًا من أنك قمت باستيراد MatInputModule في الوحدة الخاصة بك:

import { MatInputModule } from '@angular/material/input';\n\n@NgModule({\n  imports: [MatInputModule]\n})\nexport class AppModule { }

2. استخدام عنصر HTML خاطئ

MatInput يعمل فقط مع <input> و <textarea>. إذا حاولت تغليف <div> عادي أو <select> (بدون mat-select) داخل mat-form-field، فستحصل على خطأ.

غير صحيح:

<mat-form-field>\n  <div>بعض المحتوى</div>\n</mat-form-field>

صحيح: استخدم مكونات Material المناسبة:

<mat-form-field>\n  <mat-select placeholder="المدينة">\n    <mat-option value="1">القاهرة</mat-option>\n  </mat-select>\n</mat-form-field>

بالنسبة لـ mat-select، تحتاج إلى استيراد MatSelectModule.

3. المكون المخصص لا ينفذ MatFormFieldControl

هذه حالة أكثر تعقيدًا. لنفترض أنك أنشأت مكونًا خاصًا بك لإدخال التاريخ أو التقييم. Angular Material لا يعرف عنه. تحتاج إلى "تعليمه" بشكل صريح.