কৌণিক ত্রুটি: "'এনজিমোডেল'-এ আবদ্ধ হতে পারে না কারণ এটি' ইনপুট'-এর পরিচিত সম্পত্তি নয়”

Question

আমি কৌনিক 4 ব্যবহার করছি এবং আমি কনসোলে একটি ত্রুটি পেয়েছি:

'এনজিমোডেল' এর সাথে আবদ্ধ হতে পারে না কারণ এটি 'ইনপুট' এর পরিচিত সম্পত্তি নয়

আমি কীভাবে এটি সমাধান করতে পারি?

Comments

আপনি যোগ করতে হবে FormsModuleকরতে imports: []মডিউল যেখানে আপনি ব্যবহার ngModel। অন্যথায় আপনার কোড পোস্ট করুন।

— গন্টার জ্যাচবাউয়ার

আমি ভাবতে পারি না যে সমস্ত নতুন কৌণিক 2 এবং 4 বিকাশকারীরা এই সঠিক সমস্যাটিকে আঘাত করতে চলেছে (আমার অন্তর্ভুক্ত)। শেষ কবে আপনি কৌণিক ব্যবহার করা হয় এবং ছিল না ngModel কোথাও ব্যবহার করতে চান? আমি বুঝতে পারছি না কেন ফর্মস মডেলটি কেবলমাত্র ডিফল্টরূপে অন্তর্ভুক্ত করা হয়নি ....

— মাইক গ্লেডহিল

এটি মূল্যবান কিসের জন্য, আমি ফর্ম যাচাইকরণের সাথে কাজ করার সময় IONIC-4 (4.11.0) এ এই ত্রুটির মুখোমুখি হয়েছি। আমি যদি ফর্মের যে কোনও <ion-input>- এ formControlName = "myControl" যুক্ত করা ছাড়া আর কিছু না করি তবে আমি এনজিমোডেল বাইন্ডিং ত্রুটি বার্তাটি পাই। বিকল্প বৈশিষ্ট্য, যেমন formControlName1 = "myControl" এর ফলে এই ত্রুটি হয় না।

— মমেটিকান

সম্ভাব্য সদৃশটি 'এনজি মডেল'-এ আবদ্ধ

— হেরেটিক বানর

Answer 1

ফর্ম ইনপুটগুলির জন্য দ্বিমুখী ডেটা বাঁধাই ব্যবহার করার জন্য আপনাকে FormsModuleআপনার কৌণিক মডিউলটিতে প্যাকেজটি আমদানি করতে হবে ।

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

@NgModule({
    imports: [
         FormsModule      
    ]

---

সম্পাদনা

যেহেতু একই সমস্যাটি নিয়ে বহু নকল প্রশ্ন রয়েছে, তাই আমি এই উত্তরটি বাড়িয়ে দিচ্ছি।

সম্ভাব্য দুটি কারণ রয়েছে

• অনুপস্থিত FormsModule, অতএব এটি আপনার মডিউলটিতে যুক্ত করুন,

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

• [(ngModel)]ইনপুট ট্যাগে সিনট্যাক্স / বানান পরীক্ষা করুন

Comments

এনজিএমডেল এবং ফর্মস মোডুলের মধ্যে কী সম্পর্ক? তবে এটি আমার পক্ষে কাজ করছে না।

— গোবিন্দ

ফর্মস মডুলুল ফর্মের উপাদানগুলিতে অতিরিক্ত নির্দেশাবলী সরবরাহ করে, ইনপুট, নির্বাচন ইত্যাদি সহ এটি প্রয়োজনীয়। একই মডিউলে ফর্মসমডুল আমদানি করতে ভুলবেন না যা ফর্ম এলিমেন্টি বাইন্ডিংগুলি সহ আপনার উপাদানগুলি ঘোষণা করে।

— বব

যদি আমরা এটি একটি উপাদান ts ফাইল ব্যবহার করি?

— মাইক ওয়ারেন

আপনাকে

— घटक.ts এর

@ সাজিথরনের আমার কম্পোনেন্টে যদি কোনও টেমপ্লেট থাকে যা কোনও রূপের উপাদানগুলিতে এনজি-মডেল ব্যবহার করে?

— সিজেব্রু

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.componal.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.componal.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

এই উত্তরটি বিদ্যমান উত্তরের সাথে কী অতিরিক্ত মান যুক্ত করে?

— গন্টার জ্যাচবাউর

উত্তরের কোনও মান যুক্ত করে না এবং কোডটির ফর্ম্যাটটি ভুল। বেগুনীর জন্য বিভ্রান্তিকর।

— এসএমএসনেট

যদিও এই কোড স্নিপেট একটি ব্যাখ্যা সহ প্রশ্নটি সমাধান করতে পারে, সত্যিই আপনার পোস্টের মান উন্নত করতে সহায়তা করে। মনে রাখবেন যে আপনি ভবিষ্যতে পাঠকদের জন্য প্রশ্নের উত্তর দিচ্ছেন, এবং সেই লোকেরা আপনার কোড পরামর্শের কারণগুলি জানেন না।

— ক্লাইজস্টাররা

Answer 6

সমস্যার উপরে বর্ণিত সমস্ত সমাধান সঠিক। তবে আপনি যদি অলস লোডিং ব্যবহার FormsModuleকরছেন তবে চাইল্ড মডিউলটিতে এটি ফর্ম থাকা অবস্থায় আমদানি করা দরকার। এটিকে যুক্ত করলে app.module.tsকোনও লাভ হবে না।

Answer 7

আমি উপরে উল্লিখিত সমস্ত জিনিস চেষ্টা করেছিলাম, কিন্তু এখনও এটি কাজ করছে না।

তবে অবশেষে আমি কৌণিক সাইটটিতে সমস্যাটি পেয়েছি module মডিউলটিতে ফর্মমডুল আমদানি করার চেষ্টা করুন ts

Answer 8

যোগ করার চেষ্টা করুন

মডিউল স্তরে এনজিমডেল

কোড উপরের মত একই

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]
})

এইচটিএমএলে:

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

Comments

আমি এইচটিএমএলে ফর্ম ব্যবহার করেছি এবং অ্যাপ্লিকেশনগুলিতে আমদানি করা ফর্মগুলি মডিউল ব্যবহার করেছি mad

— ব্রহ্ম্মেশ্বর রাও পালেপু

Answer 14

আমার ক্ষেত্রে আমি বানান ভুল, আমি NG এর ngmodel istead যেমন উল্লেখ ছিল এম odel :) আশা করি এটা সাহায্য করে!

প্রত্যাশিত - [(এনজি মডেল)] আসল - [(এনজিএমডেল)]

Answer 15

দ্বিমুখী বাইন্ডিং যদি কাজ না করে তবে আপনার নিম্নলিখিত বিষয়গুলি যাচাই করা উচিত।

এইচটিএমএলে এনজিমোডেলটিকে এভাবে বলা উচিত। ইনপুট উপাদানটির অন্যান্য বৈশিষ্ট্যের উপর কোনও নির্ভরতা নেই

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

নিশ্চিত হয়ে নিন যে মডিউলগুলির ফর্মগুলিতে মডেলগুলি আমদানি করা হয়েছে 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 এ কোড যুক্ত হয়েছে

এনজিওমোডেল কাজের সাহায্যে দ্বিপথকে আবদ্ধ করার জন্য আপনাকে যা করতে হবে এটি হ'ল এটি কৌণিক 9 পর্যন্ত যাচাইকৃত

Answer 16

আপনি যদি ফর্ম ইনপুটগুলির জন্য দ্বি-মুখী ডেটা বাইন্ডিং ব্যবহার করতে চান তবে আপনার কৌণিক মডিউলটিতে ফর্মস মডেল প্যাকেজটি আমদানি করতে হবে। আরও তথ্যের জন্য এখানে কৌনিক 2 অফিশিয়াল টিউটোরিয়াল এবং ফর্মগুলির জন্য সরকারী নথি দেখুন

app.module.ts এ লাইনের নীচে যুক্ত করুন:

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

[...]

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

Answer 17

প্রথমে ফর্মমোডুল আমদানি করুন এবং তারপরে আপনার উপাদান.এসটিগুলিতে এনজিমোডেল ব্যবহার করুন

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

এইচটিএমএল কোড:

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

Answer 18

এমনকি যদি ফরমালগুলি আমদানি করার পরেও সমস্যাটি থেকে যায় তবে পরীক্ষা করে দেখুন যে আপনার ইনপুটটিতে পৃষ্ঠায় অন্য ইনপুট সমান মান সহ কোনও "নাম" বৈশিষ্ট্য নেই ।