Erreur angulaire: "Impossible de se lier à 'ngModel' car ce n'est pas une propriété connue de 'entrée'"

Question

J'utilise Angular 4 et j'obtiens une erreur dans la console:

Impossible de se lier à 'ngModel' car ce n'est pas une propriété connue de 'input'

Comment puis-je résoudre ça?

Answer 1

Afin d'utiliser les deux sens de la liaison de données pour les entrées de formulaire, vous devez importer le FormsModule paquet dans votre Angulaire module.

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

@NgModule({
    imports: [
         FormsModule      
    ]

---

MODIFIER

Puisqu'il y a beaucoup de doublons de questions avec le même problème, je suis l'amélioration de cette réponse.

Il y a deux raisons possibles

• Manquant de FormsModule, donc l'Ajouter à votre Module,

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

• Vérifier la syntaxe et l'orthographe de l' [(ngModel)] dans la balise input

Answer 2

C'est une bonne réponse. vous devez importer FormsMoudle

d'abord dans 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 { }
 

** deuxième dans 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();
  }));
 

Cordialement et espérons être utile

Answer 3

Votre ngModel ne fonctionne pas parce que ce n'est pas une partie de votre NgModule encore.

Vous avez à dire à l' NgModule que vous avez le droit d'utiliser ngModel tout au long de votre application, Vous pouvez le faire en ajoutant FormsModule votre app.module.ts -> imports-> [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

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

Answer 4

J'ai rencontré cette erreur lors du test de mon application Angular 6 avec Karma / Jasmine. J'avais déjà importé FormsModule dans mon module de niveau supérieur. Mais lorsque j'ai ajouté un nouveau composant utilisant [(ngModel)] mes tests ont commencé à échouer. Dans ce cas, je devais importer FormsModule dans mes TestBed TestingModule .

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

Answer 5

En app.module.ts ajoutez ceci:

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

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