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

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?

Pour utiliser la liaison de données bidirectionnelle pour les entrées de formulaire, vous devez importer le FormsModulepackage dans votre module angulaire.

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

@NgModule({
    imports: [
         FormsModule      
    ]

ÉDITER

Puisqu'il y a beaucoup de questions en double avec le même problème, j'améliore cette réponse.

Il y a deux raisons possibles

• Manquant FormsModule, ajoutez donc ceci à votre module,

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

• Vérifiez la syntaxe / l'orthographe de [(ngModel)]dans la balise d'entrée

Ceci est une bonne réponse. vous devez importer FormsMoudle

premier 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();
  }));

Meilleures salutations et espoir seront utiles

Votre ngModelne fonctionne pas parce que cela ne fait pas partie de votreNgModule .

Vous devez dire NgModuleque vous êtes autorisé à utiliser ngModeltout au long de votre application, vous pouvez le faire en l'ajoutant FormsModuleà votre app.module.ts-> imports-> [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

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

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

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

Toutes les solutions au problème mentionnées ci-dessus sont correctes. Mais si vous utilisez le chargement différé, FormsModuledoit être importé dans le module enfant qui contient des formulaires. L'ajouter app.module.tsne vous aidera pas.

En app.module.tsajouter ceci:

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

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

J'ai essayé tout ce qui est mentionné ci-dessus, mais cela ne fonctionne toujours pas.

mais finalement j'ai trouvé le problème dans le site angulaire. Essayez d'importer formModule dans module.ts c'est tout.

Essayez d'ajouter

ngModel au niveau du module

Le code est le même que ci-dessus

Mise à jour avec Angular 7.xx , rencontrez le même problème dans l'un de mes modules .

S'il se trouve dans votre module indépendant, ajoutez ces modules supplémentaires:

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

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

S'il se trouve dans votre app.module.ts, ajoutez ces modules:

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

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

Une démo simple pour prouver le cas.

La réponse pour moi était une mauvaise orthographe ngModel. Je l'avais écrit comme ceci: ngModulealors qu'il devrait l'être ngModel.

Toutes les autres tentatives n'ont évidemment pas résolu l'erreur pour moi.

import { FormsModule } from '@angular/forms'; // <<<< l'importer ici

BrowserModule, FormsModule // <<<< et ici

Il suffit donc de rechercher app.module.tsou d'un autre fichier de module et de vous assurer que vous avez FormsModuleimporté dans ...

Dans mon cas, j'ai ajouté l'import manquant, qui était le ReactiveFormsModule.

module d'importation de formulaire dans app.module.ts.

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


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

En html:

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

Dans mon cas, j'ai mal orthographié, je faisais référence à ngmodel au lieu de ng M odel :) J'espère que ça aide!

Attendu - [(ngModel)] Réel - [(ngmodel)]

Vous devez vérifier les éléments suivants si la liaison bidirectionnelle ne fonctionne pas.

En html, le ngModel doit être appelé de cette façon. Il n'y a pas de dépendance sur un autre attribut de l'élément d'entrée

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

Assurez-vous que le module FormsModule est importé dans le fichier des modules 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 { }

Assurez-vous que le composant dans lequel vous essayez d'utiliser ngModel pour la liaison bidirectionnelle est ajouté dans les déclarations du. Code ajouté au point précédent # 2

C'est tout ce que vous devez faire pour que la liaison bidirectionnelle fonctionne avec ngModel, cela est validé jusqu'à angulaire 9

Si vous souhaitez utiliser la liaison de données bidirectionnelle pour les entrées de formulaire, vous devez importer le package FormsModule dans votre module angulaire. Pour plus d'informations, consultez le tutoriel officiel d'Angular 2 ici et la documentation officielle des formulaires

dans app.module.ts, ajoutez les lignes ci-dessous:

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

[...]

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

importez d'abord FormsModule puis utilisez ngModel dans votre composant.ts

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

Code HTML:

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

Si même après l'importation du module de formulaires, le problème persiste, vérifiez que votre entrée n'a pas d'attribut "nom" avec une valeur égale à une autre entrée sur la page.