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




angular typescript (22)

[(ngModel)] को कोणीय २ , और ५+ में उपयोग करने के लिए, आपको कोणीय रूप से फ़ॉर्मस्मॉडल आयात करने की आवश्यकता है ...

इसके अलावा यह इस पथ में रूपों के तहत github में कोणीय रेपो में है:

कोणीय / संकुल / रूप / src / निर्देश / ng_model.ts

संभवतः यह AngularJs डेवलपर्स के लिए बहुत खुशी की बात नहीं है क्योंकि आप पहले कभी भी हर जगह एनजी-मॉडल का उपयोग कर सकते थे, लेकिन जैसा कि आप जिस समय का उपयोग करना चाहते हैं, उसका उपयोग करने के लिए एंगुलर अलग-अलग मॉड्यूल का उपयोग करने की कोशिश करता है, ngModel अभी Formsodule में है ।

यदि आप ReactiveFormsModule का उपयोग कर रहे हैं , तो भी इसे आयात करने की आवश्यकता है।

तो बस app.module.ts के लिए लगता है और सुनिश्चित करें कि आप में आयातित FormsModule है ...

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule //<<<< and here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

इसके अलावा यह ngModel में Angular4 ngModel लिए वर्तमान शुरुआती टिप्पणियां हैं:

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

यदि आप अपने इनपुट का उपयोग करना चाहते हैं, तो फ़ॉर्म में नहीं, आप इसे ngModelOptions साथ उपयोग कर सकते हैं और स्टैंडअलोन को सच कर सकते हैं ...

[ngModelOptions]="{standalone: true}"

अधिक जानकारी के लिए, here एनगुलर सेक्शन में ng_model देखें

मेरे कोणीय ऐप को लॉन्च करते समय मुझे निम्न त्रुटि मिली है, भले ही घटक प्रदर्शित न हो।

मुझे <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";
    }

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

  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 में भी देखने के लिए तैयार रहें

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





input