HI
RU
EN
ES
ZH
FR
DE
PT
AR
«'formGroup' से बाइंड नहीं कर सकते क्योंकि यह 'form' का ज्ञात गुण नहीं है» — क्या यह परिचित दर्द है?
\n\nयदि आपने कभी Angular में फॉर्म बनाने की कोशिश की है और ब्राउज़र कंसोल में लाल संदेश Can't bind to 'formGroup' since it isn't a known property of 'form' देखा है — तो आप अकेले नहीं हैं। यह त्रुटि Angular पर Stack Overflow के शीर्ष 5 सबसे सामान्य प्रश्नों में शामिल है। हजारों डेवलपर्स (और मैं भी) ने यह समझने में घंटों खो दिए हैं कि क्या गलत हुआ।
अच्छी खबर: कारण लगभग हमेशा एक ही होता है, और इसे 2 मिनट में ठीक किया जा सकता है। बुरी खबर: यदि आप नहीं जानते कि कहाँ देखना है, तो आप पूरे फॉर्म को फिर से लिख सकते हैं और समस्या की जड़ नहीं ढूंढ पाएंगे।
\n\nइस लेख में हम विश्लेषण करेंगे:
\n- \n
formGroup unknown propertyत्रुटि क्यों होती है \n - ReactiveFormsModule को सही तरीके से कैसे आयात करें
- TypeScript में कोड उदाहरणों के साथ त्रुटि को ठीक करने के तीन तरीके
- भविष्य में समस्या से कैसे बचें
चलिए शुरू करते हैं! 🚀
\n\n«Can't bind to 'formGroup'» त्रुटि का क्या अर्थ है?
\n\nAngular एक सख्त टाइपिंग वाला फ्रेमवर्क है। जब आप टेम्पलेट में लिखते हैं:
\n\n<form [formGroup]="myForm">Angular एक ऐसी डायरेक्टिव खोजता है जो formGroup विशेषता को संभाल सके। यदि ऐसी कोई डायरेक्टिव नहीं मिलती है, तो फ्रेमवर्क त्रुटि देता है: «Can't bind to 'formGroup' since it isn't a known property of 'form'»।
यह उस स्थिति के समान है जब आप USB को पोर्ट में डालने की कोशिश करते हैं, लेकिन गलत साइड से। सब कुछ फिट लगता है, लेकिन संपर्क मेल नहीं खाते। Angular बस यह नहीं जानता कि formGroup के साथ क्या करना है, क्योंकि आवश्यक मॉड्यूल कनेक्ट नहीं है।
मुख्य कारण: ReactiveFormsModule गायब है
\n\nformGroup डायरेक्टिव ReactiveFormsModule मॉड्यूल में रहती है। यदि आपने इसे अपने AppModule (या उस मॉड्यूल में जहां कंपोनेंट का उपयोग किया गया है) में आयात नहीं किया है, तो Angular विशेषता को पहचान नहीं पाएगा।
त्रुटि का विशिष्ट परिदृश्य इस प्रकार है:
\n\n- \n
- आप फॉर्म के साथ एक कंपोनेंट बनाते हैं
- TypeScript में
FormGroupपरिभाषित करते हैं - टेम्पलेट में
[formGroup]="myForm"का उपयोग करते हैं - कंसोल में त्रुटि प्राप्त करते हैं
कैसे ठीक करें: TypeScript में पूर्ण कोड उदाहरण
\n\nआइए चरण दर चरण एक कार्यशील फॉर्म बनाएं और प्रत्येक चरण का विश्लेषण करें।
\n\nचरण 1. फॉर्म के साथ कंपोनेंट बनाएं
\n\nपहले कंपोनेंट के TypeScript फ़ाइल में फॉर्म परिभाषित करें:
\n\n// 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)
\n\nटेम्पलेट में 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>
ब्लॉग
पुस्तक अनुशंसाएँ
यह भी पढ़ें
