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


1379

J'ai l'erreur suivante lors du lancement de mon application Angular, même si le composant n'est pas affiché.

Je dois commenter <input>pour que mon application fonctionne.

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
   <div>
      <label>Created:</label>
      <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
   </div>
</div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

Je regarde le plongeur Hero, mais je ne vois aucune différence avec mon code.

Voici le fichier composant:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';

@Component({
   selector: 'intervention-details',
   templateUrl: 'app/intervention/details/intervention.details.html',
   styleUrls: ['app/intervention/details/intervention.details.css']
})

export class InterventionDetails
{
   @Input() intervention: Intervention;

   public test : string = "toto";
}

11
Qu'est-ce que Hero plucker?
IronAces

3
J'ai le même problème depuis qu'ils ont mis à jour vers rc5 hier (intéressant, cela fonctionne pour mon collègue ..) Je pense que @abreneliere parle de leurs tutoriels - angular.io/docs/ts/latest/tutorial
PetLahev

4
@DanielShillcock, plongeur du Tour of Heroes .
Mark Rajcok

2
Oui, j'ai fait référence au tutoriel Tour of Heroes car il utilise un ngModel.
Anthony Brenelière

5
Je suis juste en train de regarder Angular et j'ai vu cette erreur lors du didacticiel Tour of Heroes. Effectivement, ils l' appellent maintenant dans la ligne suivante et vous disent comment / pourquoi le corriger.
Matt Penner

Réponses:


1925

Oui c'est ça, dans app.module.ts, je viens d'ajouter:

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

[...]

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

14
En fait, je préfère cette réponse à celle de Gabriele (qui n'est qu'un lien). Ici, le code exact est présenté. De manière ennuyeuse, j'ai rencontré ce problème juste après "Introduction à Angular 2" de John Paps sur PluralSight, et ce problème n'a même pas été mentionné. Pour eux, la reliure bidirectionnelle a fonctionné.
Mike Gledhill

20
Cela a fonctionné, mais seulement après l'avoir importé dans mon sous-module. Il n'est pas complètement clair pour les débutants que cela ne soit pas hérité par les sous-modules.
adam0101

3
Dans mon cas, mon utilisation d'accolades était incorrecte. J'utilisais à la [{ngModel}]place de la bonne:[(ngModel)]
Imtiaz

29
Pour ceux qui trouvent cela en raison d'un échec similaire avec Jasmine, vous devrez également ajouter ces importations au component.spec.tsfichier.
theMayer

3
Et pour savoir où le mettre (concernant l'erreur Jasmine): stackoverflow.com/questions/39584534/…
bagsmode

534

Pour pouvoir utiliser la liaison de données bidirectionnelle pour les entrées de formulaire, vous devez importer le FormsModulepackage dans votre Angularmodule. Pour plus d'informations, voir le Angular 2tutoriel officiel ici et la documentation officielle des formulaires


9
Je dois admettre que j'ai commencé avec Angular lundi (donc il y a 4 jours) et que je faisais leurs tutoriels, donc je suis presque sûr d'avoir fait quelque chose de mal, mais pour moi, l'importation de FormsModule n'a pas fonctionné. Ensuite, j'ai ajouté import { FORM_DIRECTIVES } from '@angular/forms';et ajouté les FORM_DIRECTIVESdirectives to et oui ma liaison fonctionne à nouveau (pour être clair qu'elle fonctionnait avant la sortie de rc5)
PetLahev

2
Ce qui semble être lié à ce stackoverflow.com/questions/31623879/…
PetLahev

1
@PetLahev le problème que vous rencontrez avec le didacticiel est que le 7 août, lorsque vous avez commencé, les didacticiels exécutaient Release Candidate 4. Au 8 août, ils se trouvaient dans Release Candidate 5, qui a une syntaxe différente
AJ Zane

5
FORM_DIRECTIVESsont morts juste au cas où
Toolkit

6
Cela ne vaut rien que, si vous utilisez un SharedModule, vous devrez peut-être également y importer FormsModule.
Difinity

243

Pour une utilisation [(ngModel)]dans Angular 2 , 4 & 5+ , vous devez importer FormsModule à partir de la forme angulaire ...

C'est aussi dans ce chemin sous des formulaires en repo angulaire dans github :

angulaire / packages / formulaires / src / directives / ng_model.ts

Ce n'est probablement pas un plaisir pour les développeurs d'AngularJs car vous pouvez utiliser ng-model partout à tout moment auparavant, mais comme Angular essaie de séparer les modules pour utiliser ce que vous souhaitez utiliser à l'époque, ngModel est maintenant dans FormsModule .

De plus, si vous utilisez ReactiveFormsModule, vous devez également l' importer.

Cherche donc simplement app.module.ts et assurez-vous que vous avez FormsModuleimporté dans ...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //<<<< import it here
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule //<<<< and here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Voici également les commentaires de départ actuels pour Angular4 ngModeldans FormsModule :

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

Si vous souhaitez utiliser votre entrée, pas dans un formulaire, vous pouvez l'utiliser avec ngModelOptionset rendre autonome la réalité ...

[ngModelOptions]="{standalone: true}"

Pour plus d'informations, regardez ng_model dans la section angulaire ici


95

Vous devez importer le FormsModule

Ouvrez app.module.ts

et ajouter une ligne

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

et

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

54

Jeter cela pourrait aider quelqu'un.

En supposant que vous avez créé un nouveau NgModule, par exemple AuthModuledédié à la gestion de vos besoins en Auth, assurez-vous d'importer FormsModuledans ce AuthModule également .

Si vous utilisez FormsModuleUNIQUEMENT dans le, AuthModulevous n'aurez pas besoin d'importer le FormModuleIN par défautAppModule

Donc quelque chose comme ça dans le AuthModule:

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

import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';

@NgModule({
  imports:      [ 
    authRouting,
    FormsModule
   ],
  declarations: [ 
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

Ensuite, oubliez l'importation AppModulesi vous n'utilisez pas FormsModuleailleurs.


J'en avais besoin au sous-module où j'utilisais les fonctionnalités du formulaire. Plus haut dans la hiérarchie n'était pas suffisant.
Zarepheth

45

Soultion simple: dans app.module.ts

Exemple 1

import {FormsModule} from "@angular/forms";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

Exemple 2

Si vous souhaitez utiliser [(ngModel)], vous devez importer FormsModule dans app.module.ts

import { FormsModule  } from "@angular/forms";     
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective, 
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

28
Où est exactement la différence dans les deux exemples?
Philipp Meissner

dans mon cas, a dû importer FormsModule sur mon component.module.ts
ISFO

40

Importez le FormsModule dans les modules où vous souhaitez utiliser le [(ngModel)]

entrez la description de l'image ici


39

Il y a deux étapes que vous devez suivre pour vous débarrasser de cette erreur

  1. importer FormsModule dans votre module d'application
  2. Passez-le comme valeur des importations dans le décorateur @NgModule

Fondamentalement, app.module.ts devrait ressembler à ci-dessous:

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';       
    import { AppComponent }  from './app.component';
    import {AppChildComponent} from './appchild.component';
    @NgModule({
      imports:      [ BrowserModule,FormsModule ],
      declarations: [ AppComponent, AppChildComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

J'espère que cela aide


Je vous remercie! Je ne l'avais pas déclaré dans la section des importations et cela me rendait fou quand j'ai déplacé un composant dans un sous-module.
Richard

30

Vous devez importer FormsModule dans votre module racine si ce composant est à la racine, c'est-à-dire app.module.ts

Veuillez ouvrir app.module.ts

Importer FormsModule depuis @ angular / forms

Ex:

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

et

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

28

J'utilise Angular 7

Je dois importer ReactiveFormsModule car j'utilise la classe FormBuilder pour créer un formulaire réactif.

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

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

24

importez FormsModule dans votre module d'application.

cela permettrait à votre application de bien fonctionner.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,ContactListCopmponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

22

Si vous avez besoin d'utiliser d' [(ngModel)]abord faire vous devez importer FormsModuledans app.module.tset puis ajouter dans une liste des importations. Quelque chose comme ça:

app.module.ts

  1. importation import {FormsModule} from "@angular/forms";
  2. ajouter des importations imports: [ BrowserModule, FormsModule ],

app.component.ts

  1. Exemple: <input type="text" [(ngModel)]="name" >
  2. et alors <h1>your name is: {{name}} </h1>

19

ngModel est la partie de FormsModule. Et il doit être importé de @ angular / forms pour fonctionner avec ngModel.

Veuillez modifier app.module.ts comme suit:

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

[...]

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

18

Si quelqu'un reçoit toujours des erreurs après avoir appliqué la solution acceptée, cela peut être dû au fait que vous disposez d'un fichier de module distinct pour le composant dans lequel vous souhaitez utiliser la propriété ngModel dans la balise d'entrée. Dans ce cas, appliquez également la solution acceptée dans le fichier module.ts du composant.


18

J'utilise Angular 5.

Dans mon cas, j'avais également besoin d'importer RactiveFormsModule.

app.module.ts (ou anymodule.module.ts)

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

ReactiveFormsModuleest requis lorsque vous en avez besoin, FormGroup, FormControl ,Validatorsetc. Pour l'utilisation ngModel, vous n'avez pas besoin ReactiveFormsModule.
Amit Chigadani

@AmitChigadani L'ajout de ReactiveFormModule est la seule chose qui a fait disparaître l'erreur dans mon cas. J'utilise Angular 7.
Eternal21

17

Je sais que cette question concerne Angular 2, mais je suis sur Angular 4 et aucune de ces réponses n'a aidé.

Dans Angular 4, la syntaxe doit être

[(ngModel)]

J'espère que cela t'aides.


15

si vous obtenez toujours l'erreur après avoir importé FormsModule correctement, vérifiez dans votre terminal ou (console Windows) car votre projet n'est pas en cours de compilation (à cause d'une autre erreur qui pourrait être n'importe quoi) et votre solution n'a pas été reflétée dans votre navigateur!

Dans mon cas, ma console avait l'erreur non liée suivante: La propriété 'retrieveGithubUser' n'existe pas sur le type 'ApiService'.


13

Dans le module, vous êtes prêt à utiliser ngModel, vous devez importer FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

Cela me manquait dans mon app.module.ts, merci Malindu!
Omzig

11

ngModel provient de FormsModule. Dans certains cas, vous pouvez recevoir ce type d'erreur:

  1. Vous n'avez pas importé le FormsModule dans le tableau d'importation du module où votre composant est déclaré, composant dans lequel le ngModel est utilisé.
  2. Vous avez importé le FormsModule dans un module hérité d'un autre module. Dans ce cas, vous avez deux options:
    • laissez le FormsModule importé dans le tableau d'importation à partir des deux modules: module1 et module2. En règle générale: l'importation d'un module ne donne PAS accès à ses modules importés (les importations ne sont pas héritées)

entrez la description de l'image ici

  • déclarer le FormsModule dans les tableaux d'importation et d'exportation dans module1 pour pouvoir le voir dans model2 également

entrez la description de l'image ici

  1. (Dans certaines versions, j'ai rencontré ce problème) Vous avez importé correctement le FormsModule mais le problème est sur la balise HTML d'entrée. Vous devez ajouter l'attribut de balise de nom pour l'entrée et le nom lié à l'objet dans [(ngModel)] doit être le même que le nom dans l' attribut de nom

    entrez la description de l'image ici


11

En ngModulevous devez importer FormsModule, car ngModelvient de FormsModule. Veuillez modifier votre app.module.ts comme le code ci-dessous que j'ai partagé

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    declarations: [
         AppComponent,
         HomeComponent
    ],
    imports: [
         BrowserModule,
         AppRoutingModule,
         FormsModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

10

importer FormModule un app.module

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

9
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule     
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

8

Parfois, vous obtenez cette erreur lorsque vous essayez d'utiliser un composant d'un module, qui n'est pas partagé, dans un module différent.

Par exemple, vous avez 2 modules avec module1.componentA.component.ts et module2.componentC.component.ts et vous essayez d'utiliser le sélecteur de module1.componentA.component.ts dans un modèle à l'intérieur de module2 (par exemple <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">), il lancera l'erreur indiquant que someInputVariableInModule1 n'est pas disponible dans module1.componentA.component.ts - même si vous l'avez @Input() someInputVariableInModule1dans module1.componentA.

Si cela se produit, vous souhaitez partager le module1.componentA pour qu'il soit accessible dans d'autres modules. Donc, si vous partagez le module1.componentA à l'intérieur d'un sharedModule, le module1.componentA sera utilisable à l'intérieur d'autres modules (en dehors du module1), et chaque module important le sharedModule pourra accéder au sélecteur dans leurs modèles en injectant la @Input()variable déclarée.


1
J'ai ce problème exact et vous dites que vous devez partager le module afin que vous puissiez utiliser le composant A dans ComponentC. Mais .. Comment partager le module1? Quelle est la sintax pour "partager un module"? J'ai deviné que l'exportation de module1 et ensuite l'importer dans le module2 était un partage suffisant, mais
j'ai

2
Donc pour me répondre, c'est comme ça que vous partagez un module angular-2-training-book.rangle.io/handout/modules/…
Agorilla

2
Hé désolé, je n'ai pas vu votre commentaire aussi vite :) Oui, c'est ainsi que vous pouvez créer un SharedModule et y importer vos propres modules, que vous souhaitez utiliser dans plusieurs autres modules. Ensuite, vous importez le SharedModule où vous souhaitez utiliser le module qui est importé dans le partagé.
Guntram

8

Pour mon scénario, j'ai dû importer à la fois [CommonModule] et [FormsModule] dans mon module

import { NgModule } from '@angular/core' 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 

import { MyComponent } from './mycomponent'

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        MyComponent 
    ]
 }) 
export class MyModule { }

8

Vous devez importer le FormsModule

Ouvrez app.module.ts

et ajouter une ligne

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

et

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

8

Parfois, si nous sommes déjà importés BrowserModule, FormsModuleet d'autres modules connexes, bien que j'aie eu la même erreur, j'ai réalisé que nous devons les importer dans l'ordre , dans mon cas, je l'ai raté. Ainsi , l' ordre devrait être comme BrowserModule, FormsModule, ReactiveFormsModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule     
  ],
  providers: [],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

J'espère que cela aide quelqu'un .. :)


7

C'est pour les gens qui utilisent du JavaScript simple au lieu du script de type. En plus de référencer le fichier de script de formulaires en haut de la page comme ci-dessous

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

vous devez également indiquer au chargeur de module de charger le fichier ng.forms.FormsModule. Après avoir effectué les modifications, ma importspropriété de NgModuleméthode ressemblait à ci-dessous

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

Bon codage!


6

Je suis passé de RC1 à RC5 et j'ai reçu cette erreur.

J'ai terminé ma migration (introduction d'un nouveau app.module.tsfichier, modification package.jsonpour inclure de nouvelles versions et modules manquants, et enfin modification de mon main.tsdémarrage en conséquence, sur la base de l' exemple de démarrage rapide Angular2 ).

J'ai fait un npm updatepuis un npm outdatedpour confirmer que les versions installées étaient correctes, toujours pas de chance.

J'ai fini par effacer complètement le node_modulesdossier et réinstaller avec npm install- Voila! Problème résolu.


5

Lorsque j'ai fait le tutoriel pour la première fois, main.ts était légèrement différent de ce qu'il est maintenant. Il semble très similaire, mais notez les différences (celle du haut est correcte).

Correct:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Ancien code du didacticiel:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

4

ajoutez le code à app.module.ts Cela a fonctionné pour moi:

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

[...]

@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
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.