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


296

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?


28
Vous devez ajouter FormsModuleau imports: []module où vous utilisez ngModel. Sinon, affichez votre code.
Günter Zöchbauer

9
Je ne peux pas penser que tous les nouveaux développeurs Angular 2 & 4 vont toucher ce problème exact (moi y compris). À quand remonte la dernière fois que vous avez utilisé Angular et que vous ne vouliez pas utiliser ngModel quelque part? Je ne comprends pas pourquoi FormsModule n'est pas seulement inclus par défaut ....
Mike Gledhill

Pour ce que ça vaut, j'ai rencontré cette erreur dans IONIC-4 (4.11.0) lorsque je travaillais avec Forms Validation. Si je ne fais rien d'autre que d'ajouter formControlName = "myControl" à n'importe quel <ion-input> n'importe où dans le formulaire, j'obtiens le message d'erreur de liaison ngModel. Les propriétés alternatives, comme formControlName1 = "myControl" ne provoquent pas cette erreur.
Memetican

Réponses:


675

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


27
Quelle est la relation entre ngModel et FormsModule? Cependant, cela ne fonctionne pas pour moi.
Govind

4
FormsModule fournit des directives supplémentaires sur les éléments du formulaire, y compris la saisie, la sélection, etc. C'est pourquoi c'est obligatoire. N'oubliez pas d'importer FormsModule dans le même module qui déclare vos composants contenant des liaisons d'éléments de formulaire.
Bob

1
Que faisons-nous si nous l'utilisons dans un fichier ts de composant?
Mike Warren

1
vous ne devez pas importer à l'intérieur de component.ts
Sajeetharan

@Sajeetharan et si j'ai un modèle dans mon composant qui utilise ng-model dans un élément de formulaire?
CJBrew

18

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


La deuxième étape, la modification de app.component.ts est-elle nécessaire?
Konrad Viltersten

9

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 ]
 })

7

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

5

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.


4

En app.module.tsajouter ceci:

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

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

6
Quelle valeur supplémentaire cette réponse ajoute-t-elle aux réponses existantes?
Günter Zöchbauer

4
n'ajoute aucune valeur à la réponse et le format du code est incorrect. Confus pour débutant.
ssmsnet

3
Bien que cet extrait de code puisse résoudre la question, y compris une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondrez à la question des lecteurs à l'avenir et que ces personnes ne connaissent peut-être pas les raisons de votre suggestion de code.
Clijsters

3

entrez la description de l'image iciJ'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. entrez la description de l'image ici


2

Essayez d'ajouter

ngModel au niveau du module

Le code est le même que ci-dessus


2

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.


2

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.


Ya, ça m'est aussi arrivé ... Model! = Module Pourquoi ça ne me va pas au cerveau!
Rahul Sonwanshi

1

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


1

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


1

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">

J'ai utilisé le formulaire en html et le module de formulaires importés dans app.madule.ts comme - import {FormsModule} de '@ angular / forms', et j'ajoute ce FormsModule dans les importations.
Brahmmeswara Rao Palepu

1

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)]


1

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


0

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
  ],
  [...]
})

0

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" />

0

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.