web-dev-qa-db-fra.com

Angular 4 - "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?

angularangular-ngmodel
159
Vijay Kumar

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

MODIFIER

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

  • MissingFormsModule, donc ajoutez ceci à votre module,

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

@NgModule({
    imports: [
        FormsModule      
    ]

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

404
Sajeetharan

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

** seconde 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 sera utile

10
Hatem

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

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

VotrengModelne fonctionne pas car il ne fait pas partie de votreNgModuleencore.

Vous devez dire à laNgModuleque vous avez le droit d'utiliserngModeldans votre application, vous pouvez le faire en ajoutantFormsModuledans votreapp.module.ts->imports->[].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })
5
Shubham Verma

Essayez d'ajouter 

ngModel au niveau du module

Le code est le même que ci-dessus

2
Thoopalliamar

Dans app.module.ts, ajoutez ceci:

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

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

enter image description here J'ai essayé tout ce qui est mentionné ci-dessus, mais ça ne fonctionne toujours pas.

mais finalement j'ai trouvé le problème dans Angular site.Try d'importer formModule dans module.ts c'est tout. enter image description here

1
Arpit Sharma

Toutes les solutions susmentionnées au problème sont correctes . Mais si vous utilisez le chargement paresseux, FormsModule doit être importé dans le module enfant contenant des formulaires. L'ajouter dans app.module.ts ne vous aidera pas.

0
Ramya

Vous devez ajouter ces importations:

import { FormsModule } from '@angular/forms';
imports: [FormsModule]
0
Laxmichand Dhuvare

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

0
S34N

commencez par importer FormsModule puis utilisez ngModel dans votre composant.ts

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

Code HTML:

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

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

Si cela 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;
  ...
})

Si cela 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
  ...
})

Un simple démo pour prouver le cas. 

0
Hearen
    //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">
0
Brahmmeswara Rao Palepu

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 Angular. Pour plus d'informations, voir le tutoriel officiel Angular 2 ici et la documentation officielle pour les formulaires.

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

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
0
Swapnil G Thaware

La réponse pour moi était la mauvaise orthographe de ngModel. Je l’ai écrit comme ceci: ngModule alors que ça devrait être ngModel.

Toutes les autres tentatives ont évidemment échoué pour résoudre l'erreur pour moi.

0
Dyary

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

BrowserModule, FormsModule // <<<< et ici

Alors, cherchez simplement app.module.ts ou un autre fichier de module et assurez-vous que FormsModule est importé dans ...

0
Manoj Gohel