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

সাধারণ উত্সাহ : অ্যাপ্লিকেশন

উদাহরণ 1

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

উদাহরণ 2

আপনি যদি [(ngModel)] ব্যবহার করতে চান তবে আপনাকে অ্যাপ.মডিউল.টসে ফর্মস মডেলটি আমদানি করতে হবে

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

অ্যাঙ্গুলার 2 থেকে যে কোনও সংস্করণের জন্য আপনার অ্যাপ্লিকেশন। Module.ts ফাইলে আপনার ফর্মস মোডুল আমদানি করতে হবে এবং এটি সমস্যার সমাধান করবে।

আপনার ফর্মমডুল আমদানি করতে হবে

App.module.ts খুলুন

এবং লাইন যুক্ত করুন

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

এবং

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

আপনার ফর্মমডুল আমদানি করতে হবে

App.module.ts খুলুন

এবং লাইন যুক্ত করুন

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

এবং

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

আমার দৃশ্যের জন্য, আমাকে আমার মডিউলটিতে [কমনমডিউল] এবং [ফর্মস মডেল] উভয়ই আমদানি করতে হয়েছিল

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 { }

আমি আরসি 1 থেকে আরসি 5 এ আপগ্রেড করেছি এবং এই ত্রুটিটি পেয়েছি।

আমি আমার মাইগ্রেশন সম্পন্ন করেছি (একটি নতুন app.module.ts ফাইল চালু app.module.ts , নতুন সংস্করণ এবং নিখোঁজ মডিউলগুলি অন্তর্ভুক্ত করার জন্য package.json পরিবর্তন করে এবং পরিশেষে অ্যাংুলার 2 দ্রুত সূচনার উদাহরণের ভিত্তিতে আমার main.ts সে অনুযায়ী বুট করার জন্য পরিবর্তন করেছি)।

আমি একটি npm update এবং তারপরে ইনস্টল করা সংস্করণগুলি সঠিক ছিল তা নিশ্চিত করার জন্য একটি npm outdated still

আমি node_modules ফোল্ডারটি পুরোপুরি মুছে node_modules এবং npm install দিয়ে পুনরায় npm install - ভয়েলা! সমস্যা সমাধান.

আমি কৌনিক 7 ব্যবহার করছি

আমাকে রেসিটিভ ফরমস মডুলুল আমদানি করতে হবে কারণ আমি প্রতিক্রিয়াশীল ফর্ম তৈরি করতে ফর্মবিল্ডার ক্লাসটি ব্যবহার করছি।

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

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

আমি জানি এই প্রশ্নটি কৌনিক 2 সম্পর্কে, তবে আমি কৌনিক 4 এ আছি এবং এর উত্তরগুলির কোনওটিই সহায়তা করেনি।

কৌণিক 4 এ সিনট্যাক্স হওয়া দরকার

[(ngModel)]

আশাকরি এটা সাহায্য করবে.

এই উপাদানটি মূল যেমন অ্যাপ্লিকেশন.মডিউল.টসে থাকলে আপনার রুট মডিউলে আপনাকে ফর্মমডুলি আমদানি করতে হবে

দয়া করে খোলা app.module.ts

@ কৌনিক / ফর্মগুলি থেকে ফর্মস মডেল আমদানি করুন

উদা:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,ContactListCopmponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

এবং

import {FormsModule} from "@angular/forms";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

এই ত্রুটি থেকে মুক্তি পেতে আপনার দুটি পদক্ষেপ অনুসরণ করতে হবে

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 { }

আশা করি এটা সাহায্য করবে

এটি নিক্ষেপ কারওর পক্ষে সহায়তা করতে পারে।

ধরে নিই যে আপনি একটি নতুন এনজিএমডিউল তৈরি করেছেন, আপনার AuthModule প্রয়োজনীয়তাগুলি পরিচালনা করতে উত্সর্গীকৃত AuthModule বলুন, সেই আথমোডুলেও FormsModule আমদানি করতে ভুলবেন না ।

আপনি যদি কেবলমাত্র FormsModule ব্যবহার AuthModule তবে আপনাকে ডিফল্ট AppModule FormModule আমদানি করতে হবে না

সুতরাং AuthModule মধ্যে 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 আমদানি করতে ভুলে যান।

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

উদাহরণস্বরূপ, আপনার কাছে মডিউল 1.componalA.componal.ts এবং মডিউল 2.componalC.componal.ts সহ ২ টি মডিউল রয়েছে এবং আপনি মডিউল 2 এর অভ্যন্তরে একটি টেম্পলেটে মডুল1.componalA.componal.ts থেকে নির্বাচকটি ব্যবহার করার চেষ্টা করছেন (যেমন <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2"> ), এটি ত্রুটিটি ছুঁড়ে দেবে যে কিছু ইনপুটভেরিয়েবলমেনডোলেট 1 মডিউল 1.componalA.comp घटक.ts- র মধ্যে উপলব্ধ না - যদিও আপনার @Input() someInputVariableInModule1 1 মডিউল 1 রয়েছে।

যদি এটি ঘটে থাকে তবে আপনি অন্যান্য মডিউলগুলিতে অ্যাক্সেসযোগ্য হওয়ার জন্য মডিউল 1.com অংশটি ভাগ করতে চান। সুতরাং যদি আপনি একটি ভাগ করা মডিউলটির মধ্যে মডিউল 1.com অংশটিএ ভাগ করেন, মডিউল 1.componalA অন্যান্য মডিউলগুলির মধ্যে (মডিউল 1 বাদে) ব্যবহারযোগ্য হবে, এবং ভাগ করা মডিউল আমদানি করা প্রতিটি মডিউল @ @Input() ইনজেকশন দেওয়ার জন্য তাদের টেম্পলেটগুলিতে নির্বাচককে অ্যাক্সেস করতে সক্ষম হবে @Input() ভেরিয়েবল ঘোষিত

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

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

যদি আপনি এখনও ফর্মসমডুল সঠিকভাবে আমদানির পরে ত্রুটি পেয়ে থাকেন তবে আপনার টার্মিনাল বা (উইন্ডোজ কনসোল) পরীক্ষা করুন কারণ আপনার প্রকল্পটি সংকলন করছে না (অন্য কোনও ত্রুটির কারণে যা কিছু হতে পারে) এবং আপনার সমাধানটি আপনার ব্রাউজারে প্রতিফলিত হয়নি!

আমার ক্ষেত্রে, আমার কনসোলটিতে নিম্নোক্ত সম্পর্কযুক্ত ত্রুটি ছিল: সম্পত্তি 'retrieveGithubUser' 'অ্যাপি সার্ভিস' টাইপটিতে বিদ্যমান নেই।

সম্প্রতি আমি পেয়েছি যে ভুলটি তখনই ঘটে না যখন আপনি নিজের মডিউলে ফর্মমডুল আমদানি ভুলে গিয়েছিলেন। আমার ক্ষেত্রে সমস্যা ছিল এই কোডে

<input type="text" class="form-control" id="firstName"
                   name="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"> 

আমি আশা করি এই উত্তরটি একই সমস্যার কারও জন্য সময় সাশ্রয় করবে।

[(ngModel)] 2 , 4 এবং 5+ এ [(ngModel)] ব্যবহারের জন্য, আপনাকে কৌণিক ফর্ম থেকে ফর্মস মডেলটি আমদানি করতে হবে ...

এছাড়াও এটি গিথুবে কৌণিক রেপোতে ফর্মগুলির অধীনে রয়েছে:

কৌণিক / প্যাকেজ / ফর্ম / এসসিআর / ডিরেক্টরি / এনজি_মডেল.টি

সম্ভবত এটি AngularJs বিকাশকারীদের পক্ষে খুব বেশি আনন্দজনক নয় কারণ আপনি আগে যে কোনও সময় এনজি-মডেলটি ব্যবহার করতে পারতেন, তবে যেহেতু কৌণিক আপনি যে কোনও সময় ব্যবহার করতে চান সেটি ব্যবহার করার জন্য মডিউলগুলি পৃথক করার চেষ্টা করছে, এনজিমোডেল এখন ফর্মস মডুলেলে রয়েছে ।

এছাড়াও আপনি যদি রিঅ্যাকটিভফর্মস মোডুল ব্যবহার করছেন তবে এটিও আমদানি করা দরকার।

সুতরাং সহজেই 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 সত্য করতে পারেন ...

[ngModelOptions]="{standalone: true}"

আরও তথ্যের জন্য, here কৌণিক বিভাগে ng_model দেখুন

ngModule আপনাকে ngModule আমদানি করতে হবে, কারণ ngModel থেকে আসছে। নীচের কোডটি আমি ভাগ করে নিয়েছি দয়া করে আপনার অ্যাপ্লিকেশন

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 { }

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 {}