javascript 'NgModel' के लिए बाध्य नहीं किया जा सकता क्योंकि यह 'इनपुट' की ज्ञात संपत्ति नहीं है

इस त्रुटि से छुटकारा पाने के लिए आपको दो चरणों का पालन करना होगा

1. अपने एप्लिकेशन मॉड्यूल में फॉर्म फॉर्मूला आयात करें
2. @NgModule डेकोरेटर में आयात के मूल्य के रूप में इसे पास करें

मूल रूप से app.module.ts नीचे की तरह दिखना चाहिए:

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';       
    import { AppComponent }  from './app.component';
    import {AppChildComponent} from './appchild.component';
    @NgModule({
      imports:      [ BrowserModule,FormsModule ],
      declarations: [ AppComponent, AppChildComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

आशा करता हूँ की ये काम करेगा

जब मैंने पहली बार ट्यूटोरियल किया था, तो 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);

यदि यह घटक रूट अर्थात app.module.ts में है, तो आपको अपने मूल मॉड्यूल में FormsModule आयात करने की आवश्यकता है

कृपया app.module.ts खोलें

@ कोणीय / प्रपत्रों से आयात प्रपत्र

उदाहरण के लिए:

import { FormsModule } from '@angular/forms';

तथा

@NgModule({
imports: [
   FormsModule
],
})

अगर आपको [(ngModel)] का उपयोग करने की आवश्यकता है, तो सबसे पहले आपको FormsModule में app.module.ts को आयात करने की आवश्यकता है और फिर आयात की सूची में जोड़ें। कुछ इस तरह:

app.module.ts

1. import {FormsModule} from "@angular/forms"; आयात import {FormsModule} from "@angular/forms";
2. आयात imports: [ BrowserModule, FormsModule ], में जोड़ें imports: [ BrowserModule, FormsModule ],

app.component.ts

1. उदाहरण: <input type="text" [(ngModel)]="name" >
2. और फिर <h1>your name is: {{name}} </h1>

इसमें फेंकने से किसी की मदद हो सकती है।

मान लें कि आपने एक नया 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 ।

यह उन लोगों के लिए है जो टाइप स्क्रिप्ट के बजाय सादे जावास्क्रिप्ट का उपयोग करते हैं। नीचे की तरह पृष्ठ के शीर्ष पर प्रपत्र स्क्रिप्ट फ़ाइल को संदर्भित करने के अलावा

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

आपको ng.forms.FormsModule को लोड करने के लिए मॉड्यूल लोडर को भी बताना चाहिए। बदलाव के बाद मेरे imports की विधि NgModule विधि नीचे की तरह NgModule

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

हैप्पी कोडिंग!

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule     
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

मुझे पता है कि यह सवाल एंगुलर 2 के बारे में है, लेकिन मैं एंगुलर 4 पर हूं और इनमें से किसी भी जवाब ने मदद नहीं की।

कोणीय 4 में सिंटैक्स की आवश्यकता होती है

[(ngModel)]

उम्मीद है की यह मदद करेगा।

यदि किसी को स्वीकृत समाधान लागू करने के बाद भी त्रुटियां हो रही हैं, तो यह संभवतः हो सकता है क्योंकि आपके पास उस घटक के लिए एक अलग मॉड्यूल फ़ाइल है जिसमें आप इनपुट टैग में ngModel संपत्ति का उपयोग करना चाहते हैं। उस स्थिति में, घटक के मॉड्यूल.ts फ़ाइल में भी स्वीकृत समाधान लागू करें।

हाल ही में मैंने पाया कि गलती न केवल उस स्थिति में होती है जब आप अपने मॉड्यूल में फॉर्ममॉडल आयात को भूल जाते हैं। मेरे मामले में समस्या इस कोड में थी

<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">

मुझे उम्मीद है कि इस उत्तर से किसी ऐसे व्यक्ति के लिए समय की बचत होगी, जिसकी समस्या समान है।

आपको FormsModule आयात करना होगा

App.module.ts खोलें

और लाइन जोड़ें

import { FormsModule } from '@angular/forms';

तथा

@NgModule({
imports: [
   FormsModule
],
})

मैंने 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! समस्या सुलझ गयी।

प्रपत्र इनपुट के लिए दो-तरफ़ा डेटा बाइंडिंग का उपयोग करने में सक्षम होने के लिए, आपको अपने Angular मॉड्यूल में FormsModule पैकेज आयात करने की आवश्यकता होती है। अधिक जानकारी के लिए, Angular 2 आधिकारिक ट्यूटोरियल here और forms लिए आधिकारिक दस्तावेज

मैं कोणीय 5 का उपयोग कर रहा हूं।

मेरे मामले में, मुझे RactiveFormsModule को भी आयात करने की आवश्यकता थी।

app.module.ts (या anymodule.module.ts)

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

यदि आप फॉर्ममॉडल को सही ढंग से आयात करने के बाद भी त्रुटि प्राप्त कर रहे हैं, तो अपने टर्मिनल या (विंडोज़ कंसोल) में जांचें क्योंकि आपका प्रोजेक्ट संकलित नहीं कर रहा है (क्योंकि एक और त्रुटि जो कुछ भी हो सकती है) और आपका समाधान आपके ब्राउज़र में परिलक्षित नहीं हुआ है!

मेरे मामले में, मेरे कंसोल में निम्नलिखित असंबंधित त्रुटि थी: संपत्ति 'पुनः प्राप्त करेंजीथुसेर' का प्रकार 'अपीसर' पर मौजूद नहीं है।

कोणीय 2 से किसी भी संस्करण के लिए, आपको अपनी app.module.ts फ़ाइल में फॉर्ममॉडल आयात करना होगा और यह समस्या को ठीक कर देगा।

मैं कोणीय 7 का उपयोग कर रहा हूं

मुझे RactiveFormsModule को आयात करना होगा क्योंकि मैं प्रतिक्रियाशील रूप बनाने के लिए FormBuilder वर्ग का उपयोग कर रहा हूं।

import { 
FormsModule, 
ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ], declarations: []})

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 { }

सिंपल सोलुशन: 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 { }

हाँ, यह app.module.ts में है, मैंने अभी जोड़ा:

import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

ngModel FormsModule से आ रहा है। ऐसे कुछ मामले हैं जब आप इस तरह की त्रुटि प्राप्त कर सकते हैं:

1. आपने मॉड्यूल के आयात सरणी में जहां आपका घटक घोषित किया गया है, उस घटक को आयात नहीं किया, जिसमें घटक जिसमें ngModel का उपयोग किया जाता है।
2. आपने FormsModule को एक मॉड्यूल में आयात किया है जो दूसरे मॉड्यूल से विरासत में मिला है। इस मामले में आपके पास दो विकल्प हैं:
   • बता दें कि FormsModule दोनों मॉड्यूल से आयात सरणी में आयात किया गया है: मॉड्यूल 1 और मॉड्यूल 2। नियम के रूप में: किसी मॉड्यूल को आयात करना उसके आयातित मॉड्यूल तक पहुंच प्रदान नहीं करता है। (आयात विरासत में नहीं मिला है)

• मॉड्यूल 1 में आयात और निर्यात सरणियों में FormMMule को घोषित करें और इसे मॉडल 2 में भी देखने के लिए तैयार रहें

3. (कुछ संस्करण में मैंने इस समस्या का सामना किया है) आपने फॉर्मस्मोड्यूल को सही ढंग से आयात किया है लेकिन समस्या इनपुट HTML टैग पर है। आपको इनपुट और ऑब्जेक्ट बाउंड नाम [(ngModel)] में नाम टैग विशेषता को जोड़ना होगा, नाम विशेषता में नाम के समान होना चाहिए