typescript - Angular-fel: "Kan inte binda till 'ngModel' eftersom det inte är en känd egenskap hos 'input'"

Jag använder Angular 4 och jag får ett fel i konsolen:

Kan inte binda till 'ngModel' eftersom det inte är en känd egenskap hos 'input'

Hur kan jag lösa detta?

Svar #1

För att använda tvåvägsdatabindning för formulärfält behöver du importera FormsModule-paketet i din Angular-modul.

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

@NgModule({
    imports: [
         FormsModule      
    ]

REDIGERA

Eftersom det finns många dubblettfrågor med samma problem, förbättrar jag detta svar.

Det finns två möjliga orsaker

  • Saknar FormsModule, därför lägg till detta i din modul,

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

@NgModule({
    imports: [
        FormsModule      
    ]

  • Kontrollera syntaxen/stavningen av [(ngModel)] i input-taggen

Svar #2

Detta är ett korrekt svar. Du behöver importera FormsModule

Först, i 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 { }

För det andra, i 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();
  }));

Svar #3

Ditt ngModel fungerar inte eftersom det ännu inte är en del av din NgModule.

Du måste tala om för NgModule att du har rätt att använda ngModel i hela din app. Du kan göra det genom att lägga till FormsModule i din app.module.ts -> imports -> [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

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

Svar #4

Alla ovan nämnda lösningar på problemet är korrekta. Men om du använder lazy loading, behöver FormsModule importeras i undermodulen som har formulär i sig. Att lägga till det i app.module.ts kommer inte att hjälpa.

Svar #5

Jag stötte på detta fel när jag testade min Angular 6-app med Karma/Jasmine. Jag hade redan importerat FormsModule i min topplägesmodul. Men när jag lade till en ny komponent som använde [(ngModel)] började mina tester att misslyckas. I detta fall behövde jag importera FormsModule i min TestBed TestingModule.

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

Relaterade artiklar