FormControl और Input मेल नहीं खा रहे? Angular Material की समस्या हल करें

परिचय: प्रत्येक Angular डेवलपर का परिचित दर्द

क्या आपने कभी एक त्रुटि खोजने में एक घंटा बिताया है, जो कोड की सिर्फ एक पंक्ति में छिपी हुई थी? यदि आप Angular Material Autocomplete के साथ काम करते हैं और Can't bind to 'formControl' since it isn't a known property of 'input' संदेश का सामना करते हैं — तो आप अकेले नहीं हैं। Stack Overflow पर इस प्रश्न ने हजारों बार देखा गया है, और यह व्यर्थ नहीं है। त्रुटि सबसे अप्रत्याशित क्षण में आती है, जब ऐसा लगता है कि सब कुछ पहले से ही पूरी तरह से काम कर रहा है।

इस लेख में हम त्रुटि के कारणों का विश्लेषण करेंगे, इसे ठीक करने के तीन तरीकों की विस्तार से तुलना करेंगे और TypeScript पर काम करने वाले उदाहरण दिखाएंगे। पढ़ने के बाद, आप न केवल ऑटोकम्प्लीट को ठीक कर पाएंगे, बल्कि Angular की आर्किटेक्चर को भी गहराई से समझ पाएंगे। चलिए शुरू करते हैं!

Can't bind to 'formControl' त्रुटि क्यों होती है?

चलिए सीधे मुद्दे पर आते हैं। त्रुटि तब प्रकट होती है जब Angular formControl निर्देश को <input> तत्व से बांधने का प्रयास करता है, लेकिन इसे वर्तमान मॉड्यूल में नहीं पाता है। यह तार्किक लगता है, लेकिन शैतान विवरण में छिपा है।

वास्तव में, formControl एक निर्देश का चयनकर्ता है, जो ReactiveFormsModule मॉड्यूल का हिस्सा है। यदि आप इस मॉड्यूल को आयात करना भूल गए हैं या इसे गलत तरीके से आयात किया है, तो Angular को पता ही नहीं चलेगा कि आपके इनपुट पर [formControl] विशेषता के साथ क्या करना है।

यहाँ एक सामान्य स्थिति है: आप ऑटोकम्प्लीट के साथ एक नया कंपोनेंट बनाते हैं, TypeScript कोड में FormControl जोड़ते हैं, और टेम्पलेट में लिखते हैं:

<input type="text" [formControl]="myControl" [matAutocomplete]="auto">\n<mat-autocomplete #auto="matAutocomplete">\n  <mat-option *ngFor="let option of filteredOptions | async" [value]="option">\n    {{option}}\n  </mat-option>\n</mat-autocomplete>

और फिर — बम! कंसोल में लाल त्रुटि। परिचित लगता है? तो आगे पढ़ें।

विधि 1: ReactiveFormsModule आयात करना (सबसे सरल और सही)

पहला और सबसे स्पष्ट तरीका यह सुनिश्चित करना है कि ReactiveFormsModule सही मॉड्यूल में आयात किया गया है। स्टैंडअलोन कंपोनेंट्स (Angular 14+) या क्लासिक मॉड्यूल के लिए प्रक्रिया थोड़ी अलग है।

क्लासिक मॉड्यूल (NgModule) के लिए

उस मॉड्यूल की फ़ाइल खोलें जहाँ आपका कंपोनेंट पंजीकृत है (उदाहरण के लिए, app.module.ts या shared.module.ts), और आयात जोड़ें:

import { ReactiveFormsModule } from '@angular/forms';\nimport { MatAutocompleteModule } from '@angular/material/autocomplete';\nimport { MatInputModule } from '@angular/material/input';\n\n@NgModule({\n  imports: [\n    ReactiveFormsModule,\n    MatAutocompleteModule,\n    MatInputModule,\n    // अन्य आयात\n  ],\n  // ...\n})\nexport class AppModule { }

महत्वपूर्ण: MatInputModule के बिना, matInput निर्देश भी काम नहीं करेगा, और आपको समान त्रुटि मिलेगी। तीनों मॉड्यूल को एक साथ आयात करें।

स्टैंडअलोन कंपोनेंट्स (Angular 14+ और Angular 17) के लिए

यदि आप नई आर्किटेक्चर का उपयोग कर रहे हैं, तो आयात सीधे कंपोनेंट में किया जाता है:

import { Component } from '@angular/core';\nimport { ReactiveFormsModule, FormControl } from '@angular/forms';\nimport { MatAutocompleteModule } from '@angular/material/autocomplete';\nimport { MatInputModule } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'app-search',\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatAutocompleteModule,\n    MatInputModule,\n    AsyncPipe\n  ],\n  template: `\n    <input type="text" [formControl]="myControl" [matAutocomplete]="auto">\n    <mat-autocomplete #auto="matAutocomplete">\n      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">\n        {{option}}\n      </mat-option>\n    </mat-