कोणीय त्रुटि: "इनपुट 'के लिए ज्ञात संपत्ति नहीं होने के कारण वह' एनकोमॉडल 'से नहीं बंध सकता है"

Question

मैं Angular 4 का उपयोग कर रहा हूं और मुझे कंसोल में एक त्रुटि मिल रही है:

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

मैं इसे कैसे हल करूं?

Comments

आपको उस मॉड्यूल में जोड़ना FormsModuleहोगा imports: []जहां आप उपयोग करते हैं ngModel। अन्यथा अपना कोड पोस्ट करें।

— गुंटर ज़ोचबॉयर

मैं नहीं सोच सकता कि सभी नए कोणीय 2 और 4 डेवलपर्स इस सटीक मुद्दे (स्वयं शामिल) को हिट करने जा रहे हैं। पिछली बार जब आप कोणीय का इस्तेमाल किया था और कहीं एनकोमॉडल का उपयोग नहीं करना चाहते थे? मुझे समझ में नहीं आता है कि फॉर्ममॉडल को सिर्फ डिफ़ॉल्ट रूप से शामिल क्यों नहीं किया जाता है ....

— माइक गिल्डहिल

जब यह मूल्य है, तो मुझे IOS-4 (4.11.0) में इस त्रुटि का सामना करना पड़ा, जब फॉर्म वैलिडेशन के साथ काम कर रहा था। अगर मुझे फॉर्म में कहीं भी फॉर्म <कन्ट्रोलनाम = "myControl" के अलावा कोई भी <आयन-इनपुट> नहीं मिला है, तो मुझे ngModel बाइंडिंग त्रुटि संदेश मिलता है। वैकल्पिक गुण, जैसे formControlName1 = "myControl" इस त्रुटि का कारण नहीं है।

— मेमोरिकन

संभव नहीं है 'एनकोमॉडल' के लिए बाध्य नहीं हो सकता क्योंकि यह 'इनपुट' की ज्ञात संपत्ति नहीं है

— हेरेनेटिक मंकी

Answer 1

प्रपत्र इनपुट के लिए दो-तरफ़ा डेटा बाइंडिंग का उपयोग करने के लिए आपको FormsModuleअपने कोणीय मॉड्यूल में पैकेज को आयात करना होगा ।

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

@NgModule({
    imports: [
         FormsModule      
    ]

---

संपादित करें

चूंकि एक ही समस्या के साथ बहुत सारे डुप्लिकेट प्रश्न हैं, इसलिए मैं इस उत्तर को बढ़ा रहा हूं।

इसके दो संभावित कारण हैं

• गुम है FormsModule, इसलिए इसे अपने मॉड्यूल में जोड़ें,

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
      imports: [
          FormsModule      
      ]
  

• [(ngModel)]इनपुट टैग में वाक्य रचना / वर्तनी की जाँच करें

Comments

NgModel और FormsModule के बीच क्या संबंध है? हालांकि यह मेरे लिए काम नहीं कर रहा है।

— गोविंद

FormModule प्रपत्र के तत्वों पर अतिरिक्त निर्देश प्रदान करता है, जिसमें इनपुट, चयन, आदि शामिल हैं, इसीलिए यह आवश्यक है। फ़ॉर्म मॉड्यूल बाइंडिंग वाले आपके घटकों की घोषणा करने वाले एक ही मॉड्यूल में FormMMule को आयात करना न भूलें।

— बॉब

यदि हम किसी घटक ts फ़ाइल में इसका उपयोग कर रहे हैं तो हम क्या करते हैं?

— माइक वॉरेन

आपको घटक के अंदर आयात नहीं करना चाहिए।

— सजेतीचरण

@ सजीतेहरन अगर मेरे कंपोनेंट में कोई टेम्पलेट है जो एनजी-मॉडल का उपयोग किसी न किसी रूप में करता है?

— CJBrew

Answer 2

यह एक सही उत्तर है। आपको प्रपत्र आयात करने की आवश्यकता है

पहले app.module.ts में

**

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

** app.component.spec.ts में दूसरा

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

सबसे अच्छा संबंध और आशा सहायक होगा

Comments

क्या दूसरा कदम, app.component.ts को बदलना आवश्यक है?

— बजे कोनराड विल्टर्स्टन

Answer 3

आपका ngModelकाम नहीं हो रहा है क्योंकि यह आपके NgModuleअभी तक का हिस्सा नहीं है।

आपको यह बताना होगा NgModuleकि आपके पास ngModelपूरे ऐप का उपयोग करने का अधिकार है , आप इसे FormsModuleअपने app.module.ts-> imports-> में जोड़कर कर सकते हैं []।

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

Answer 4

कर्म / चमेली के साथ अपने कोणीय 6 ऐप का परीक्षण करते समय मैं इस त्रुटि में भाग गया। मैंने पहले ही FormsModuleअपने शीर्ष-स्तरीय मॉड्यूल में आयात कर लिया था । लेकिन जब मैंने एक नया घटक जोड़ा जो [(ngModel)]मेरे परीक्षणों का उपयोग करता था वह विफल होने लगा। इस मामले में, मुझे FormsModuleअपने में आयात करने की आवश्यकता थी TestBed TestingModule।

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));

Answer 5

इसे app.module.tsजोड़ें:

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

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

Comments

मौजूदा उत्तरों में यह उत्तर किस अतिरिक्त मूल्य को जोड़ता है?

— गुंटर ज़ोचबॉयर

उत्तर में कोई मान नहीं जोड़ा जाता है और कोड का प्रारूप गलत है। भिखारी के लिए भ्रमित करना।

— ssmsnet

हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।

— क्लिजस्टर्स

Answer 6

समस्या के उपर्युक्त सभी उपाय सही हैं। लेकिन अगर आप आलसी लोडिंग का उपयोग कर रहे हैं, FormsModuleतो चाइल्ड मॉड्यूल में आयात करने की आवश्यकता है , जिसमें इसके रूप हैं। इसे जोड़ना app.module.tsमदद नहीं करेगा।

Answer 7

मैंने ऊपर बताई गई सभी चीजों की कोशिश की, लेकिन फिर भी यह काम नहीं कर रही है।

लेकिन अंत में मुझे इस मुद्दे को कोणीय साइट में पाया गया।

Answer 8

जोड़ने का प्रयास करें

मॉड्यूल स्तर में ngModel

कोड ऊपर जैसा है

Answer 9

कोणीय 7.xx के साथ अपडेट करें , मेरे एक मॉड्यूल में एक ही मुद्दे का सामना करें ।

यदि यह आपके स्वतंत्र मॉड्यूल में निहित है, तो इन अतिरिक्त मॉड्यूलों को जोड़ें:

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can be random now;
  ...
})

यदि यह आपके अंदर निहित है app.module.ts, तो इन मॉड्यूल को जोड़ें:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ FormsModule, BrowserModule ], // order can be random now
  ...
})

मामले को साबित करने के लिए एक सरल डेमो ।

Answer 10

मेरे लिए उत्तर की गलत वर्तनी थी ngModel। मैंने इसे इस तरह लिखा था: ngModuleजबकि यह होना चाहिए ngModel।

अन्य सभी प्रयास स्पष्ट रूप से मेरे लिए त्रुटि को हल करने में विफल रहे।

Comments

हां, यह मेरे साथ भी हुआ ... मॉडल! = मॉड्यूल मेरे दिमाग में क्यों नहीं जाता है!

— राहुल सोनवंशी

Answer 11

import { FormsModule } from '@angular/forms'; // <<<< इसे यहाँ आयात करें

BrowserModule, FormsModule // <<<< और यहाँ

तो बस app.module.tsया किसी अन्य मॉड्यूल फ़ाइल की तलाश करें और सुनिश्चित करें कि आपने में FormsModuleआयात किया है ...

Answer 12

मेरे मामले में मैंने लापता आयात को जोड़ा, जो था ReactiveFormsModule।

Answer 13

app.module.ts में आयात फार्म मॉड्यूल।

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Html में:

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">

Comments

मैंने html में फ़ॉर्म का उपयोग किया था, और app.madule.ts में आयातित फ़ॉर्म मॉड्यूल जैसे- '{कोणीय / फ़ॉर्म' से {FormsModule} आयात करते हैं, और आयात में उस FormsModule को जोड़ते हैं।

— ब्रह्मेश्वर राव पालपु

Answer 14

मेरे मामले में मैं चूक गया था, मैं एम ओडेल के ngmodel istead के रूप में उल्लेख कर रहा था :) आशा है कि यह मदद करता है!

अपेक्षित - [(ngModel)] वास्तविक - [(ngmodel)]

Answer 15

यदि दो तरह से बंधन काम नहीं करता है, तो आपको निम्नलिखित चीजों को सत्यापित करना चाहिए।

Html में ngModel को इस तरह कहा जाना चाहिए। इनपुट तत्व की अन्य विशेषता पर कोई निर्भरता नहीं है

<input [(ngModel)]="inputText">

सुनिश्चित करें कि FormsModule को मॉड्यूल फ़ाइल में आयात किया गया है app.modules.ts

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

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent // suppose, this is the component in which you are trying to use two ay binding
    ],
    imports: [
        BrowserModule,
        FormsModule,
        // other modules
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

सुनिश्चित करें कि जिस घटक में आप दो तरह से बाइंडिंग का उपयोग करने की कोशिश कर रहे हैं, बाइंडिंग को घोषणाओं में जोड़ा गया है। पिछले बिंदु # 2 में कोड जोड़ा गया

यह सब कुछ है जो आपको ngModel काम का उपयोग करके दो तरह से बाध्यकारी बनाने की आवश्यकता है, यह कोणीय 9 तक मान्य है

Answer 16

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

app.module.ts में नीचे लाइनें जोड़ें:

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

[...]

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

Answer 17

पहले FormsModule आयात करें और फिर अपने कंपोनेंट में ngModel का उपयोग करें

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML कोड:

<input type='text' [(ngModel)] ="usertext" />

Answer 18

यदि फॉर्ममोड्यूल आयात करने के बाद भी समस्या बनी रहती है, तो जांच लें कि आपके इनपुट में पृष्ठ पर किसी अन्य इनपुट के बराबर मूल्य वाला "नाम" विशेषता नहीं है ।