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

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

আপনাকে এই আমদানিগুলি যুক্ত করতে হবে:

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

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

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

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

[...]

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

আমার উত্তরটি ছিল ngModel ভুল বানান। আমি এটি লিখেছিলাম: ngModule যখন এটি ngModule হওয়া উচিত।

অন্যান্য সমস্ত প্রচেষ্টা অবশ্যই আমার জন্য ত্রুটিটি সমাধান করতে ব্যর্থ হয়েছে।

উত্তরটি নিম্নরূপ:

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

@ngModule({
   imports:[FormsModule];

})

এটি একটি সঠিক উত্তর। আপনার ফর্মমডল আমদানি করতে হবে

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();
  }));

শুভেচ্ছা এবং আশা সহায়ক হবে

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

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

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

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

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

সম্পাদনা

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

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

• নিখোঁজ FormsModule , সুতরাং এটি আপনার মডিউলে যুক্ত করুন,

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

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

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

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

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

import { FormsModule } from '@angular/forms'; // <<<< এটি এখানে আমদানি করুন

BrowserModule, FormsModule এবং এখানে

সুতরাং সহজেই app.module.ts বা অন্য একটি মডিউল ফাইল সন্ধান করুন এবং নিশ্চিত করুন যে আপনি FormsModule আমদানি করেছেন ...

কৌণিক 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
  ...
})

মামলা প্রমাণের জন্য একটি সাধারণ demo ।