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 पर सबसे लोकप्रिय त्रुटियों में से एक है (हज़ारों व्यूज़!), और आज हम इसे पूरी तरह से समझेंगे। आप न केवल इस समस्या को कैसे ठीक करें बल्कि यह भी जानेंगे कि यह क्यों होती है। और सबसे महत्वपूर्ण बात, यदि मानक MatInput आपके काम नहीं आता, तो Angular Material के लिए अपने स्वयं के कंट्रोल बनाना सीखेंगे।

चलिए शुरू करते हैं! 🚀

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 डायरेक्टिव जोड़ना भूल गए

सबसे सामान्य कारण। आपने <input> एलिमेंट पर matInput निर्दिष्ट नहीं किया है।

गलत:

<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> के साथ काम करता है। यदि आप mat-form-field में एक सामान्य <div> या <select> (बिना mat-select के) लपेटने का प्रयास करते हैं, तो त्रुटि मिलेगी।

गलत:

<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 को इसके बारे में पता नहीं है। इसे स्पष्ट रूप से "सिखाना" होगा।