javascript - 'NgModel' के लिए बाध्य नहीं किया जा सकता क्योंकि यह 'इनपुट' की ज्ञात संपत्ति नहीं है
angular typescript (18)
मेरे कोणीय ऐप को लॉन्च करते समय मुझे निम्न त्रुटि मिली है, भले ही घटक प्रदर्शित न हो।
मुझे
<input>
पर टिप्पणी करनी होगी ताकि मेरा ऐप काम करे।
zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
<div>
<label>Created:</label>
<input type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
</div>
</div>"): [email protected]:28 ; Zone: <root> ; Task: Promise.then ; Value:
मैं हीरो प्लंकर को देख रहा हूं, लेकिन मुझे अपने कोड से कोई अंतर नहीं दिखता।
यहाँ घटक फ़ाइल है:
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';
@Component({
selector: 'intervention-details',
templateUrl: 'app/intervention/details/intervention.details.html',
styleUrls: ['app/intervention/details/intervention.details.css']
})
export class InterventionDetails
{
@Input() intervention: Intervention;
public test : string = "toto";
}
सिंपल सोलुशन: app.module.ts में
उदाहरण 1
import {FormsModule} from "@angular/forms";
// add in imports
imports: [
BrowserModule,
FormsModule
],
उदाहरण 2
यदि आप [(ngModel)] का उपयोग करना चाहते हैं, तो आपको app.module.ts में FormsModule का आयात करना होगा
import { FormsModule } from "@angular/forms";
@NgModule({
declarations: [
AppComponent, videoComponent, tagDirective,
],
imports: [
BrowserModule, FormsModule
],
providers: [ApiServices],
bootstrap: [AppComponent]
})
export class AppModule { }
अगर आपको
[(ngModel)]
का उपयोग करने की आवश्यकता है, तो सबसे पहले आपको
FormsModule
में
app.module.ts
को आयात करने की आवश्यकता है और फिर आयात की सूची में जोड़ें।
कुछ इस तरह:
app.module.ts
-
import {FormsModule} from "@angular/forms";
आयातimport {FormsModule} from "@angular/forms";
-
आयात
imports: [ BrowserModule, FormsModule ],
में जोड़ेंimports: [ BrowserModule, FormsModule ],
app.component.ts
-
उदाहरण:
<input type="text" [(ngModel)]="name" >
-
और फिर
<h1>your name is: {{name}} </h1>
आपको FormsModule आयात करना होगा
App.module.ts खोलें
और लाइन जोड़ें
import { FormsModule } from '@angular/forms';
तथा
@NgModule({
imports: [
FormsModule
],
})
आपको FormsModule आयात करना होगा
App.module.ts खोलें
और लाइन जोड़ें
import { FormsModule } from '@angular/forms';
तथा
@NgModule({
imports: [
FormsModule
],
})
इसमें फेंकने से किसी की मदद हो सकती है।
मान लें कि आपने एक नया NgModule बनाया है, तो
AuthModule
को अपनी
AuthModule
आवश्यकताओं को संभालने के लिए समर्पित करें, उस AuthModule में FormsModule को
भी
आयात करना सुनिश्चित करें।
यदि आप
FormsModule
केवल
FormsModule
उपयोग कर रहे हैं, तो आपको डिफ़ॉल्ट
AppModule
में
FormModule
आयात करने की आवश्यकता नहीं होगी
तो कुछ इस तरह से
AuthModule
:
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';
@NgModule({
imports: [
authRouting,
FormsModule
],
declarations: [
SignupComponent,
LoginComponent
]
})
export class AuthModule { }
यदि आप कहीं और
FormsModule
उपयोग नहीं करते हैं, तो
AppModule
में आयात करने के बारे में भूल
AppModule
।
कभी-कभी आपको यह त्रुटि तब होती है जब आप किसी मॉड्यूल से एक घटक का उपयोग करने का प्रयास करते हैं, जिसे साझा नहीं किया जाता है, एक अलग मॉड्यूल में।
उदाहरण के लिए, आपके पास मॉड्यूल 1.componentA.component.ts और मॉड्यूल 2.componentC.component.ts के साथ 2 मॉड्यूल हैं और आप मॉड्यूल 2 के अंदर एक टेम्पलेट में mod1.componentA.component.ts से चयनकर्ता का उपयोग करने का प्रयास करते हैं (जैसे
<module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">
), यह त्रुटि को फेंक देगा कि someInputVariableInModule1 मॉड्यूल 1 के अंदर उपलब्ध नहीं है। @ArtentA.component.ts - भले ही आपके पास
@Input() someInputVariableInModule1
कुछInputVariableInModule1 हैं।
यदि ऐसा होता है, तो आप मॉड्यूल 1.componentA को अन्य मॉड्यूल में सुलभ होने के लिए साझा करना चाहते हैं।
इसलिए यदि आप एक साझा मॉड्यूल के अंदर मॉड्यूल 1.कॉमप्लांटेंट को साझा करते हैं, तो मॉड्यूल 1.componentA अन्य मॉड्यूल (मॉड्यूल 1 से बाहर) के अंदर उपयोग करने योग्य होगा, और प्रत्येक साझा मॉड्यूल को आयात करने वाले मॉड्यूल
@Input()
इंजेक्ट करके अपने टेम्पलेट में चयनकर्ता तक पहुंच सकेंगे। घोषित चर।
जब मैंने पहली बार ट्यूटोरियल किया था, तो main.ts अब जो है उससे थोड़ा अलग दिखता है। यह बहुत समान दिखता है, लेकिन अंतरों पर ध्यान दें (शीर्ष एक सही है)।
सही बात:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
पुराना ट्यूटोरियल कोड:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
मेरे परिदृश्य के लिए, मुझे अपने मॉड्यूल में [कॉमनमॉडल] और [फॉर्ममॉड्यूल] दोनों का आयात करना पड़ा
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MyComponent } from './mycomponent'
@NgModule({
imports: [
CommonModule,
FormsModule
],
declarations: [
MyComponent
]
})
export class MyModule { }
मैं कोणीय 5 का उपयोग कर रहा हूं।
मेरे मामले में, मुझे RactiveFormsModule को भी आयात करने की आवश्यकता थी।
app.module.ts (या anymodule.module.ts)
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
मैंने RC1 से RC5 में अपग्रेड किया और यह त्रुटि प्राप्त की।
मैंने अपना माइग्रेशन पूरा किया (नए
app.module.ts
फ़ाइल को शुरू करते हुए, नए संस्करणों और लापता मॉड्यूल को शामिल करने के लिए
package.json
को बदलते हुए
package.json
, और अंत में
Angular2 क्विक स्टार्ट उदाहरण के
आधार पर अपने
main.ts
को बूट करने के लिए बदलकर)।
मैंने एक
npm update
और फिर स्थापित संस्करणों की पुष्टि करने के लिए
npm outdated
एक
npm outdated
सही था, फिर भी कोई भाग्य नहीं।
मैंने
node_modules
फ़ोल्डर को पूरी तरह से मिटा दिया और
node_modules
स्थापित के साथ पुनः
npm install
- Voila!
समस्या सुलझ गयी।
मॉड्यूल में आप ngModel का उपयोग करने के लिए तैयार हैं, आपको FormsModule आयात करना होगा
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
],
})
export class AbcModule { }
यदि किसी को स्वीकृत समाधान लागू करने के बाद भी त्रुटियां हो रही हैं, तो यह संभवतः हो सकता है क्योंकि आपके पास उस घटक के लिए एक अलग मॉड्यूल फ़ाइल है जिसमें आप इनपुट टैग में ngModel संपत्ति का उपयोग करना चाहते हैं। उस स्थिति में, घटक के मॉड्यूल.ts फ़ाइल में भी स्वीकृत समाधान लागू करें।
यदि यह घटक रूट अर्थात app.module.ts में है, तो आपको अपने मूल मॉड्यूल में FormsModule आयात करने की आवश्यकता है
कृपया app.module.ts खोलें
@ कोणीय / प्रपत्रों से आयात प्रपत्र
उदाहरण के लिए:
import { FormsModule } from '@angular/forms';
तथा
@NgModule({
imports: [
FormsModule
],
})
हाँ, यह app.module.ts में है, मैंने अभी जोड़ा:
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
हाल ही में मैंने पाया कि गलती न केवल उस स्थिति में होती है जब आप अपने मॉड्यूल में फॉर्ममॉडल आयात को भूल जाते हैं। मेरे मामले में समस्या इस कोड में थी
<input type="text" class="form-control" id="firstName"
formControlName="firstName" placeholder="Enter First Name"
value={{user.firstName}} [(ngModel)]="user.firstName">
मैं इसे परिवर्तन फ़ॉर्म के साथ ठीक करता हूं - नाम
<input type="text" class="form-control" id="firstName"
name="firstName" placeholder="Enter First Name"
value={{user.firstName}} [(ngModel)]="user.firstName">
मुझे उम्मीद है कि इस उत्तर से किसी ऐसे व्यक्ति के लिए समय की बचत होगी, जिसकी समस्या समान है।
ngModule
आपको
ngModule
आयात करने की आवश्यकता
FormsModule
, क्योंकि
ngModel
से
FormsModule
।
कृपया नीचे दिए गए कोड की तरह अपने
app.module.ts को
संशोधित करें
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
ngModel FormsModule से आ रहा है। ऐसे कुछ मामले हैं जब आप इस तरह की त्रुटि प्राप्त कर सकते हैं:
- आपने मॉड्यूल के आयात सरणी में जहां आपका घटक घोषित किया गया है, उस घटक को आयात नहीं किया, जिसमें घटक जिसमें ngModel का उपयोग किया जाता है।
-
आपने FormsModule को एक मॉड्यूल में आयात किया है जो दूसरे मॉड्यूल से विरासत में मिला है।
इस मामले में आपके पास दो विकल्प हैं:
- बता दें कि FormsModule दोनों मॉड्यूल से आयात सरणी में आयात किया गया है: मॉड्यूल 1 और मॉड्यूल 2। नियम के रूप में: किसी मॉड्यूल को आयात करना उसके आयातित मॉड्यूल तक पहुंच प्रदान नहीं करता है। (आयात विरासत में नहीं मिला है)
- मॉड्यूल 1 में आयात और निर्यात सरणियों में FormMMule को घोषित करें और इसे मॉडल 2 में भी देखने के लिए तैयार रहें