javascript - 'NgModel' এ বাঁধা যাবে না কারণ এটি 'ইনপুট' এর পরিচিত সম্পত্তি নয়

angular typescript input (19)

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

আমার অঙ্গুলি অ্যাপ্লিকেশনটি চালু করার সময় আমি নিম্নলিখিত ত্রুটি পেয়েছি, এমনকি যদি উপাদানটি প্রদর্শিত হয় না।

আমি আমার মন্তব্য কাজ করে যাতে মন্তব্য করতে হবে।

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

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

যখন আমি প্রথম টিউটোরিয়ালটি করলাম, তখন 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);

মডিউলে আপনি ngModel ব্যবহার করতে ইচ্ছুক, আপনাকে FormsModule আমদানি করতে হবে

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

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

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

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

Angular 4 সিনট্যাক্স হতে হবে

[(ngModel)]

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

যদি আপনি [(ngModel)] ব্যবহার করতে চান তবে প্রথমে আপনাকে FormsModule এ app.module.ts আমদানি করতে হবে এবং তারপরে আমদানি FormsModule যোগ করুন। এটার মতো কিছু:

app.module.ts

import {FormsModule} from "@angular/forms"; আমদানি import {FormsModule} from "@angular/forms";
আমদানি imports: [ BrowserModule, FormsModule ], যোগ করুন imports: [ BrowserModule, FormsModule ],

app.component.ts

উদাহরণ: <input type="text" [(ngModel)]="name" >
এবং তারপর <h1>your name is: {{name}} </h1>

আমি Angular 5 ব্যবহার করছি।

আমার ক্ষেত্রে, আমি RactiveFormsModule খুব আমদানি করতে হবে।

app.module.ts (অথবা anymodule.module.ts)

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

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

Angular 2 , 4 এবং 5+ এ [(ngModel)] ব্যবহার করার জন্য, আপনাকে Angular ফর্ম থেকে FormsModule আমদানি করতে হবে ...

এছাড়াও গিথুব- এ এঙ্গুলার রেপোতে এই রূপে রয়েছে:

কৌণিক / প্যাকেজ / ফর্ম / src / নির্দেশাবলী / ng_model.ts

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

এছাড়াও আপনি ReactiveFormsModule ব্যবহার করা হয় , এটি খুব আমদানি করতে হবে।

তাই সহজভাবে 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]="{standalone: true}"

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

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

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

আমি একটি npm update এবং তারপর ইনস্টল সংস্করণ নিশ্চিত করার জন্য একটি npm outdated সঠিক ছিল, এখনও কোন ভাগ্য।

আমি সম্পূর্ণরূপে node_modules ফোল্ডার wiping শেষ এবং npm install সঙ্গে পুনরায় npm install - Voila! সমস্যা সমাধান.

আপনি অ্যাপ্লিকেশন মডিউল মধ্যে ফর্ম ফর্ম মডিউল।

এটা আপনার অ্যাপ্লিকেশন ভাল চলমান হবে।

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

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

আমার ক্ষেত্রে, আমার কনসোলে নিম্নলিখিত সম্পর্কিত ত্রুটি ছিল: সম্পত্তি 'পুনরুদ্ধার GithubUser' টাইপ 'ApiService' বিদ্যমান নেই।

এটি টাইপ স্ক্রিপ্টের পরিবর্তে সাধারণ জাভাস্ক্রিপ্ট ব্যবহার করে এমন লোকদের জন্য। নীচের মত পৃষ্ঠার শীর্ষে ফর্ম স্ক্রিপ্ট ফাইল উল্লেখ করার পাশাপাশি

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

ng.forms.FormsModule লোড করার জন্য আপনাকে মডিউল ng.forms.FormsModule । পরিবর্তনগুলি করার পর আমার imports NgModule পদ্ধতির সম্পত্তি নীচের মতো লাগছিল

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

শুভ কোডিং!

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

আপনার অ্যাপ্লিকেশন মডিউল মধ্যে ফর্ম ফর্ম মডিউল
@ এনজিএমডিয়াল সজ্জাতে আমদানির মূল্য হিসাবে এটি পাস করুন

মূলত 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 { }

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

হ্যাঁ এটা এটি, app.module.ts মধ্যে, আমি শুধু যোগ করেছেন:

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

[...]

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

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

খুলুন app.module.ts

এবং লাইন যোগ করুন

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

এবং

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

সহজ সলশন : app.module.ts মধ্যে

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

imports: [
 BrowserModule,
 FormsModule
 ],

উদাহরণ 2 :

যদি আপনি [(ngModel) ব্যবহার করতে চান] তবে আপনাকে app.module.ts এ ফর্মস মডিউল আমদানি করতে হবে।

import { FormsModule  } from "@angular/forms";     
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective, 
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

উদাহরণস্বরূপ, আপনার মডিউল1.componentA.component.ts এবং module2.componentC.component.ts এর সাথে 2 মডিউল রয়েছে এবং আপনি মডিউল 2 এর ভিতরে একটি মডিউল মডিউল1.componentA.component.ts থেকে নির্বাচক ব্যবহার করার চেষ্টা করছেন (উদাহরণস্বরূপ <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2"> ), এটি ত্রুটিটি নিক্ষেপ করবে যে someInputVariableInModule1 মডিউল1.componentA.component.ts এর ভিতরে উপলব্ধ নেই - যদিও আপনার @Input() someInputVariableInModule1 তে কিছু ইনপুটভ্যারেবলইনএমডিয়াল 1 থাকে।

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

ফিচার মডিউলগুলির সাথে সমন্বয়যুক্ত কৌণিক 4 (যদি আপনি উদাহরণস্বরূপ একটি ভাগ-মডিউল ব্যবহার করে থাকেন) আপনাকে কাজ করার জন্য ReactiveFormsModule মডিউল রপ্তানি করতে হবে।

import { NgModule }                                 from '@angular/core';
import { CommonModule }                             from '@angular/common';
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { }