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

  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>

आपको 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);

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

मेरे परिदृश्य के लिए, मुझे अपने मॉड्यूल में [कॉमनमॉडल] और [फॉर्ममॉड्यूल] दोनों का आयात करना पड़ा 

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 से आ रहा है। ऐसे कुछ मामले हैं जब आप इस तरह की त्रुटि प्राप्त कर सकते हैं:

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

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

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






javascript   angular   typescript   input  


input