Angular error: “Can't bind to 'ngModel' since it isn't a known property of 'input'”

问题

I\'m using Angular 4 and I am getting an error in the console:

Can\'t bind to \'ngModel\' since it isn\'t a known property of \'input\'

How can I resolve this?

回答1:

In order to use two-way data binding for form inputs you need to import the FormsModule package in your Angular module.

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

@NgModule({
    imports: [
         FormsModule      
    ]

---

EDIT

Since there are lot of duplicate questions with the same problem, I am enhancing this answer.

There are two possible reasons

• Missing FormsModule, hence Add this to your Module,

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

• Check the syntax/spelling of [(ngModel)] in the input tag

回答2:

This is a right answer. you need to import FormsMoudle

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

** second in 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();
  }));

Best regards and hope will be helpfull

回答3:

I ran into this error when testing my Angular 6 App with Karma/Jasmine. I had already imported FormsModule in my top-level module. But when I added a new component that used [(ngModel)] my tests began failing. In this case, I needed to import FormsModule in my TestBed TestingModule.

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

回答4:

Your ngModel is not working because it's not a part of your NgModule yet.

You have to tell the NgModule that you have authority to use ngModel throughout your app, You can do it by adding FormsModule into your app.module.ts -> imports-> [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

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

回答5:

In app.module.ts add this:

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

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

回答6:

All the above mentioned solutions to the problem are correct. But if you are using lazy loading, FormsModule needs to be imported in the child module which has forms in it. Adding it in app.module.ts won't help.

回答7:

Try adding

ngModel in module level

The code is same as the above

回答8:

Update with Angular 7.x.x, encounter the same issue in one of my modules.

If it lies in your independent module, add these extra modules:

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

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

If it lies in your app.module.ts, add these modules:

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

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

A simple demo to prove the case.

回答9:

I tried all the thing that are mentioned above, but still it is not working.

but finally I found the issue in Angular site.Try to import formModule in module.ts thats it.

回答10:

import form module in app.module.ts.

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


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

In html:

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

回答11:

import { FormsModule } from '@angular/forms'; //<<<< import it here

BrowserModule, FormsModule //<<<< and here

So simply looks for app.module.ts or another module file and make sure you have FormsModule imported in...

回答12:

In my case I added the missing import, which was the ReactiveFormsModule.

回答13:

If you want to use two-way data binding for form inputs you need to import theFormsModule package in your Angular module. For more info see the Angular 2 official tutorial here and the official documentation for forms

in the app.module.ts add below lines :

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

[...]

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

回答14:

The Answer for me was wrong spelling of ngModel. I had it written like this : ngModule while it should be ngModel.

All other attempts obviously failed to resolve the error for me.

回答15:

first import FormsModule and then use ngModel in your component.ts

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML Code:

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

来源：https://stackoverflow.com/questions/43298011/angular-error-cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-inpu