Kesalahan sudut: "Tidak dapat mengikat ke 'ngModel' karena ini bukan properti 'input' yang diketahui"

Saya menggunakan Angular 4 dan saya mendapatkan kesalahan di konsol:

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

Bagaimana saya bisa menyelesaikan ini?

Untuk menggunakan pengikatan data dua arah untuk input formulir, Anda perlu mengimpor FormsModulepaket dalam modul Angular Anda.

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

@NgModule({
    imports: [
         FormsModule      
    ]

EDIT

Karena ada banyak pertanyaan rangkap dengan masalah yang sama, saya meningkatkan jawaban ini.

Ada dua kemungkinan alasan

• Hilang FormsModule, karenanya Tambahkan ini ke Modul Anda,

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

• Periksa sintaks / ejaan [(ngModel)]dalam tag input

Ini jawaban yang tepat. Anda perlu mengimpor FormsMoudle

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

** kedua di app.component.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();
  }));

Salam dan harapan akan sangat membantu

Anda ngModeltidak bekerja karena itu belum menjadi bagian dari Anda NgModule.

Anda harus memberi tahu NgModulebahwa Anda memiliki wewenang untuk digunakan di ngModelseluruh aplikasi Anda, Anda dapat melakukannya dengan menambahkan FormsModuleke app.module.ts-> imports-> Anda [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

Saya mengalami kesalahan ini saat menguji Aplikasi Angular 6 saya dengan Karma / Jasmine. Saya sudah mengimpor FormsModulemodul tingkat atas saya. Tetapi ketika saya menambahkan komponen baru yang menggunakan [(ngModel)]tes saya mulai gagal. Dalam hal ini, saya perlu mengimpor FormsModuledi TestBed TestingModule.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));

Semua solusi yang disebutkan di atas untuk masalah sudah benar. Tetapi jika Anda menggunakan lazy loading, FormsModuleperlu diimpor dalam modul anak yang memiliki formulir di dalamnya. Menambahkannya tidak app.module.tsakan membantu.

Di app.module.tstambahkan ini:

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

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

Saya mencoba semua hal yang disebutkan di atas, tetapi tetap saja tidak berhasil.

tapi akhirnya saya menemukan masalah di situs Angular. Cobalah untuk mengimpor formModule di module.ts itu saja.

Coba tambahkan

ngModel di tingkat modul

Kode sama dengan di atas

Perbarui dengan Angular 7.xx , temukan masalah yang sama di salah satu modul saya .

Jika terletak di modul independen Anda, tambahkan modul tambahan ini:

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can be random now;
  ...
})

Jika ada di Anda app.module.ts, tambahkan modul ini:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ FormsModule, BrowserModule ], // order can be random now
  ...
})

Demo sederhana untuk membuktikan kasusnya.

Jawaban untuk saya adalah ejaan yang salah ngModel. Saya menulisnya seperti ini: ngModulesementara itu seharusnya ngModel.

Semua upaya lain jelas gagal menyelesaikan kesalahan untuk saya.

import { FormsModule } from '@angular/forms'; // <<<< impor di sini

BrowserModule, FormsModule // <<<< dan di sini

Jadi cukup cari app.module.tsatau file modul lain dan pastikan Anda telah FormsModulemengimpor ...

Dalam kasus saya, saya menambahkan impor yang hilang, yaitu ReactiveFormsModule.

impor modul formulir di app.module.ts.

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Dalam html:

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

Dalam kasus saya, saya salah mengeja, saya merujuk sebagai ngmodel istead dari ng M odel :) Semoga Membantu!

Diharapkan - [(ngModel)] Sebenarnya - [(ngmodel)]

Anda harus memverifikasi hal-hal berikut jika ikatan dua arah tidak berfungsi.

Dalam html, ngModel harus dipanggil dengan cara ini. Tidak ada ketergantungan pada atribut elemen input lainnya

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

Make Sure FormsModule diimpor ke file modul 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 { }

Pastikan komponen di mana Anda mencoba menggunakan ngModel untuk pengikatan dua arah ditambahkan dalam deklarasi the. Kode ditambahkan pada poin sebelumnya # 2

Ini adalah semua yang perlu Anda lakukan untuk membuat dua cara mengikat menggunakan kerja ngModel, ini divalidasi hingga sudut 9

Jika Anda ingin menggunakan pengikatan data dua arah untuk input formulir, Anda harus mengimpor paket theFormsModule dalam modul Angular Anda. Untuk info lebih lanjut lihat tutorial resmi Angular 2 di sini dan dokumentasi resmi untuk formulir

di app.module.ts tambahkan baris di bawah ini:

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

[...]

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

pertama impor FormsModule dan kemudian gunakan ngModel di component.ts Anda

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

Kode HTML:

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

Jika bahkan setelah mengimpor formmodule, masalah tetap ada, periksa apakah Input Anda tidak memiliki atribut "nama" dengan nilai yang sama dengan input lainnya pada halaman.