Tidak dapat mengikat ke 'ngModel' karena ini bukan properti 'input' yang dikenal

Saya mendapat kesalahan berikut ketika meluncurkan aplikasi Angular saya, meskipun komponen tidak ditampilkan.

Saya harus mengomentari <input>agar aplikasi saya berfungsi.

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>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

Saya melihat plunker Pahlawan, tetapi saya tidak melihat perbedaan dari kode saya.

Ini adalah file komponen:

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

Ya itu saja, di app.module.ts, saya baru saja menambahkan:

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

[...]

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

Agar dapat menggunakan pengikatan data dua arah untuk input formulir, Anda perlu mengimpor FormsModulepaket dalam Angularmodul Anda . Untuk info lebih lanjut lihat Angular 2tutorial resmi di sini dan dokumentasi resmi untuk formulir

Untuk menggunakan [(ngModel)]dalam Angular 2 , 4 & 5+ , Anda perlu mengimpor FormsModule dari ...

Juga ada di jalur ini di bawah formulir dalam Angular repo di github :

sudut / paket / formulir / src / arahan / ng_model.ts

Mungkin ini bukan kesenangan bagi pengembang AngularJs karena Anda dapat menggunakan ng-model di mana saja kapan saja sebelumnya, tetapi karena Angular mencoba memisahkan modul untuk menggunakan apa pun yang Anda ingin Anda gunakan pada saat itu, ngModel ada di FormsModule sekarang .

Juga jika Anda menggunakan ReactiveFormsModule, perlu mengimpornya juga.

Jadi cukup mencari app.module.ts dan pastikan Anda telah FormsModulemengimpor ...

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

Juga ini adalah komentar awal saat ini untuk Angular4 ngModeldi FormsModule :

/**
 * `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!
 */

Jika Anda ingin menggunakan masukan Anda, tidak dalam bentuk, Anda dapat menggunakannya dengan ngModelOptionsdan membuat standalone benar ...

[ngModelOptions]="{standalone: true}"

Untuk info lebih lanjut, Lihatlah ng_model di bagian Angular di sini

Anda perlu mengimpor FormsModule

Buka app.module.ts

dan tambahkan baris

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

dan

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

Melempar ini bisa membantu seseorang.

Dengan asumsi Anda telah membuat NgModule baru, katakan AuthModuledidedikasikan untuk menangani kebutuhan Auth Anda, pastikan untuk mengimpor FormsModuleAuthModule itu juga .

Jika Anda akan menggunakan FormsModuleHANYA di AuthModulemaka Anda tidak perlu mengimpor FormModuleIN defaultAppModule

Jadi sesuatu seperti ini di 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 { }

Kemudian lupakan tentang mengimpor AppModulejika Anda tidak menggunakan FormsModuletempat lain.

Simple Soultion: Di app.module.ts

Contoh 1

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

imports: [
 BrowserModule,
 FormsModule
 ],

Contoh 2

Jika Anda ingin menggunakan [(ngModel)] maka Anda harus mengimpor FormsModule di app.module.ts

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

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

Impor FormsModule di modul-modul di mana Anda ingin menggunakan [(ngModel)]

Ada dua langkah yang perlu Anda ikuti untuk menyingkirkan kesalahan ini

1. impor FormsModule di modul aplikasi Anda
2. Berikan nilai impor di dekorator @NgModule

pada dasarnya app.module.ts akan terlihat seperti di bawah ini:

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

Semoga ini bisa membantu

Anda perlu mengimpor FormsModule di modul root Anda jika komponen ini di root yaitu app.module.ts

Silakan buka app.module.ts

Impor FormsModule dari @ angular / form

Ex:

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

dan

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

Saya menggunakan Angular 7

Saya harus mengimpor ReactiveFormsModule karena saya menggunakan kelas FormBuilder untuk membuat formulir reaktif.

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

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

impor FormsModule di modul aplikasi Anda.

itu akan membiarkan aplikasi Anda berjalan dengan baik.

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

Jika Anda perlu menggunakan [(ngModel)]pertama yang Anda butuhkan untuk mengimpor FormsModuledalam app.module.tsdan kemudian menambahkan dalam daftar impor. Sesuatu seperti ini:

app.module.ts

1. impor import {FormsModule} from "@angular/forms";
2. tambahkan impor imports: [ BrowserModule, FormsModule ],

app.component.ts

1. Contoh: <input type="text" [(ngModel)]="name" >
2. lalu <h1>your name is: {{name}} </h1>

ngModel adalah bagian dari FormsModule. Dan itu harus diimpor dari @ angular / form untuk bekerja dengan ngModel.

Silakan ubah app.module.ts sebagai berikut:

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

[...]

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

Jika seseorang masih mendapatkan kesalahan setelah menerapkan solusi yang diterima, itu bisa jadi mungkin karena Anda memiliki file modul terpisah untuk komponen di mana Anda ingin menggunakan properti ngModel di tag input. Dalam hal itu, terapkan solusi yang diterima dalam file module.ts komponen juga.

Saya menggunakan Angular 5.

Dalam kasus saya, saya perlu mengimpor RactiveFormsModule juga.

app.module.ts (atau anymodule.module.ts)

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

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

Saya tahu pertanyaan ini tentang Angular 2, tetapi saya berada di Angular 4 dan tidak ada jawaban yang membantu.

Dalam Angular 4 sintaksnya perlu

[(ngModel)]

Semoga ini membantu.

jika Anda masih mendapatkan kesalahan setelah mengimpor FormsModule dengan benar maka periksa di terminal atau (konsol windows) karena proyek Anda tidak dikompilasi (karena kesalahan lain yang bisa berupa apa saja) dan solusi Anda belum tercermin di browser Anda!

Dalam kasus saya, konsol saya mengalami galat yang tidak terkait berikut ini: Properti 'takeveGithubUser' tidak ada pada tipe 'ApiService'.

Dalam modul Anda bersedia menggunakan ngModel Anda harus mengimpor FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

ngModel berasal dari FormsModule.Ada beberapa kasus ketika Anda dapat menerima kesalahan semacam ini:

1. Anda tidak mengimpor FormsModule ke larik modul impor tempat komponen Anda dideklarasikan, komponen tempat ngModel digunakan.
2. Anda telah mengimpor FormsModule ke satu modul yang diwarisi dari modul lain. Dalam hal ini Anda memiliki dua opsi:
   • biarkan FormsModule diimpor ke array impor dari kedua modul: module1 dan module2. Sebagai aturan: Mengimpor modul TIDAK memberikan akses ke modul yang diimpor. (Impor tidak diwarisi)

• mendeklarasikan FormsModule ke dalam array impor dan ekspor di module1 untuk dapat melihatnya di model2 juga

3. (Dalam beberapa versi saya menghadapi masalah ini) Anda telah mengimpor FormsModule dengan benar tetapi masalahnya ada pada tag HTML input. Anda harus menambahkan atribut tag nama untuk input dan nama objek terikat di [(ngModel)] harus sama dengan nama ke atribut nama

   

Di ngModuleAnda perlu mengimpor FormsModule, karena ngModelberasal dari FormsModule. Silakan modifikasi app.module.ts Anda seperti kode di bawah ini yang telah saya bagikan

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

mengimpor FormModule menjadi app.module

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

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

Kadang-kadang Anda mendapatkan kesalahan ini ketika Anda mencoba menggunakan komponen dari modul, yang tidak dibagi, dalam modul yang berbeda.

Misalnya, Anda memiliki 2 modul dengan module1.componentA.component.ts dan module2.componentC.component.ts dan Anda mencoba menggunakan pemilih dari module1.componentA.component.ts dalam templat di dalam module2 (misalnya <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">), ia akan membuang kesalahan bahwa someInputVariableInModule1 tidak tersedia di dalam module1.componentA.component.ts - meskipun Anda memiliki @Input() someInputVariableInModule1di module1.componentA.

Jika ini terjadi, Anda ingin membagikan module1.componentA agar dapat diakses di modul lain. Jadi, jika Anda membagikan module1.componentA di dalam sharedModule, module1.componentA akan dapat digunakan di dalam module lain (di luar module1), dan setiap modul yang mengimpor sharedModule akan dapat mengakses pemilih dalam template mereka dengan menyuntikkan @Input()variabel yang dideklarasikan.

Untuk skenario saya, saya harus mengimpor [CommonModule] dan [FormsModule] ke modul saya

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

Anda perlu mengimpor FormsModule

Buka app.module.ts

dan tambahkan baris

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

dan

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

Kadang-kadang jika kita sudah diimpor BrowserModule, FormsModuledan Modul terkait lainnya meskipun saya mendapat Kesalahan yang sama maka saya menyadari bahwa kita perlu mengimpornya dalam Pesanan , dalam kasus saya saya melewatkannya. Jadi agar harus seperti BrowserModule, FormsModule, ReactiveFormsModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

Semoga ini bisa membantu seseorang .. :)

Ini untuk orang-orang yang menggunakan JavaScript biasa, bukan Ketik Script. Selain mereferensikan file skrip formulir di atas halaman seperti di bawah ini

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

Anda juga harus memberi tahu pemuat modul untuk memuat ng.forms.FormsModule. Setelah melakukan perubahan importsproperti NgModulemetode saya tampak seperti di bawah ini

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

Selamat coding!

Saya memutakhirkan dari RC1 ke RC5 dan menerima kesalahan ini.

Saya menyelesaikan migrasi saya (memperkenalkan app.module.tsfile baru , mengubah package.jsonuntuk memasukkan versi baru dan modul yang hilang, dan akhirnya mengubah saya main.tsuntuk boot sesuai, berdasarkan contoh mulai cepat Angular2 ).

Saya melakukan npm updatedan kemudian npm outdateduntuk mengkonfirmasi versi yang diinstal sudah benar, masih belum berhasil.

Saya akhirnya benar-benar menghapus node_modulesfolder dan menginstal ulang dengan npm install- Voila! Masalah terpecahkan.

Ketika saya pertama kali melakukan tutorial, main.ts tampak sedikit berbeda dari yang sekarang. Ini terlihat sangat mirip, tetapi perhatikan perbedaannya (yang paling atas benar).

Benar:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Kode tutorial lama:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

tambahkan kode ke app.module.ts Itu bekerja untuk saya:

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

[...]

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