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

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

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

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

[...]

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

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

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

Vous devez importer le FormsModule

Ouvrez app.module.ts

et ajouter une ligne

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

et

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

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.

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

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

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

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

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

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

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>

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

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.

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

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.

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

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

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

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)

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

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

   

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

importer FormModule un app.module

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

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

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.

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

Vous devez importer le FormsModule

Ouvrez app.module.ts

et ajouter une ligne

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

et

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

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

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!

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.

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

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

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

[...]

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