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

296

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?

Vijay Kumar
sumber
28
Anda perlu menambahkan FormsModuleuntuk imports: []modul mana Anda menggunakan ngModel. Kalau tidak poskan kode Anda.
Günter Zöchbauer
9
Saya tidak dapat berpikir bahwa semua pengembang Angular 2 & 4 baru akan mendapatkan masalah yang tepat ini (termasuk saya). Kapan terakhir kali Anda menggunakan Angular dan tidak ingin menggunakan ngModel di suatu tempat? Saya tidak mengerti mengapa FormsModule tidak hanya disertakan secara default ....
Mike Gledhill
Untuk apa nilainya, saya menemukan kesalahan ini di IONIC-4 (4.11.0) ketika bekerja dengan Validasi Formulir. Jika saya tidak melakukan apa-apa selain menambahkan formControlName = "myControl" ke <ion-input> mana saja di dalam formulir, saya mendapatkan pesan kesalahan ngModel binding. Properti alternatif, seperti formControlName1 = "myControl" tidak menyebabkan kesalahan ini.
Memetican

Jawaban:

675

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

Sajeetharan
sumber
27
Apa hubungan antara ngModel dan FormsModule? Namun ini tidak bekerja untuk saya.
Govind
4
FormsModule memberikan arahan tambahan tentang elemen-elemen form, termasuk input, pilih, dll. Karena itulah diperlukan. Jangan lupa untuk mengimpor FormsModule dalam modul yang sama yang menyatakan komponen Anda mengandung binding elemen form.
Bob
1
Apa yang kita lakukan jika kita menggunakan ini dalam file komponen ts?
Mike Warren
1
Anda tidak boleh mengimpor inside component.ts
Sajeetharan
@Sajeetharan bagaimana jika saya memiliki templat di Komponen saya yang menggunakan ng-model dalam beberapa elemen formulir?
CJBrew
18

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

Hatem
sumber
Apakah langkah kedua, mengubah app.component.ts diperlukan?
Konrad Viltersten
8

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 ]
 })
Shubham Verma
sumber
7

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

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.

Ramya
sumber
4

Di app.module.tstambahkan ini:

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

@NgModule({
    declarations: [AppComponent],
    imports: [FormsModule],
})
DURGESH CHOURASIYA
sumber
6
Nilai tambahan apa yang ditambahkan jawaban ini ke jawaban yang ada?
Günter Zöchbauer
4
tidak menambahkan nilai apa pun pada jawaban dan format kode salah. Membingungkan untuk pemula.
ssmsnet
3
Sementara potongan kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda.
Clijsters
3

masukkan deskripsi gambar di siniSaya 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. masukkan deskripsi gambar di sini

Arpit Sharma
sumber
2

Coba tambahkan

ngModel di tingkat modul

Kode sama dengan di atas

Thoopalliamar
sumber
2

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.

Dengarkan
sumber
2

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.

Kamus
sumber
Ya, ini juga terjadi pada saya ... Model! = Modul Mengapa itu tidak masuk dalam otak saya!
Rahul Sonwanshi
1

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

Manoj Gohel
sumber
1

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

S34N
sumber
1

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">
Brahmmeswara Rao Palepu
sumber
Saya menggunakan form dalam html, dan mengimpor modul formulir di app.madule.ts seperti- impor {FormsModule} dari '@ angular / form', dan menambahkan FormsModule dalam impor.
Brahmmeswara Rao Palepu
1

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

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

pragapraga
sumber
1

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

Avinash
sumber
0

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
  ],
  [...]
})
Swapnil G Thaware
sumber
0

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" />
Shakti Srivastav
sumber
0

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.

Lucas Simões
sumber