web-dev-qa-db-fra.com

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

L'erreur suivante s'affiche lors du lancement de mon application Angular, même si le composant n'est pas affiché.

Je dois commenter le <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 plunker Hero, mais je ne vois aucune différence avec mon code.

Voici le fichier de 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";
    }
javascriptangulartypescriptinput
1077
Anthony Brenelière

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

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
1548
Anthony Brenelière

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

487
Gabriele Ciech

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

En outre, il est dans ce chemin sous formes dans repo angulaire dans github :

angular/packages/forms/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 tente de séparer les modules pour utiliser tout ce que vous souhaitez utiliser à ce moment-là, ngModel est dans FormsModule maintenant.

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

Il suffit donc de chercher app.module.ts et de vous assurer que FormsModule est importé 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 { }

Il s’agit également des commentaires de départ actuels pour Angular4 ngModel dans 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 ngModelOptions et rendre autonome true ...

[ngModelOptions]="{standalone: true}"

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

214
Alireza

Vous devez importer le FormsModule

Ouvrir app.module.ts

et ajouter une ligne

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

et

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

Cela pourrait aider quelqu'un.

En supposant que vous ayez créé un nouveau NgModule, dites AuthModule dédiée à la gestion de vos besoins en authentification, assurez-vous d'importer FormsModule dans cet AuthModule aussi.

Si vous utilisez la FormsModule UNIQUEMENT dans la AuthModule, vous n'avez pas besoin d'importer la FormModule DANS la valeur par défaut AppModule.

Donc, quelque chose comme ceci dans la 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 { }

Alors oubliez d'importer dans AppModule si vous n'utilisez pas le FormsModule ailleurs.

48
Rexford

Vous devez suivre deux étapes pour éliminer cette erreur.

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

en gros, app.module.ts devrait ressembler à ceci:

    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 ça aide

35
debugmode

Simple Soultion: 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 { }
27
ngCourse

Vous devez importer FormsModule dans votre module racine si ce composant se trouve à 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
],
})
26
WapShivam

importer FormsModule dans votre module d'application.

cela laisserait votre application fonctionner correctement.

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
Shashikant Pandit

Si vous devez d'abord utiliser [(ngModel)], vous devez importer FormsModule dans app.module.ts, puis ajouter une liste d'importations. Quelque chose comme ça:

app.module.ts

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

app.component.ts

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

J'utilise Angular 5.

Dans mon cas, je devais aussi importer RactiveFormsModule.

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

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

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

J'utilise Angular 7

Je dois importer RactiveFormsModule 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: []})
15
Ved_Code_it

si vous obtenez toujours l'erreur après avoir importé correctement FormsModule, vérifiez 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 que votre solution n'a pas été reflétée dans votre navigateur!

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

13
mruanova

Si une erreur persiste après l'application de la solution acceptée, il est possible que vous disposiez d'un fichier de module distinct pour le composant dans lequel vous souhaitez utiliser la propriété ngModel dans la balise input. Dans ce cas, appliquez également la solution acceptée dans le fichier module.ts du composant.

13
Subham Pasari

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.

13
Matt

Dans le module que vous souhaitez utiliser ngModel vous devez importer FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }
11
Malindu Sandaruwan

Dans ngModule, vous devez importer FormsModule, car ngModel provient 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 { }
9
Vicky Khichar

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

  1. Vous n'avez pas importé le FormsModule dans import array du module où votre composant est déclaré, composant dans lequel 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: L'importation d'un module NE donne PAS accès à ses modules importés (les importations ne sont pas héritées)

enter image description here

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

enter image description here

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

    enter image description here

9
Rzv Razvan
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
William Pourmajidi

Pour mon scénario, je devais 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 { }
7
Mina Matta

Vous devez importer le FormsModule

Ouvrir app.module.ts

et ajouter une ligne

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

et

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

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 dans module2 (par exemple, <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2"> ), cela générera l’erreur que someInputVariableInModule1 n’est pas disponible dans module1.componentA.component.ts - même si vous avez la @Input() someInputVariableInModule1 dans le module1.componentA.

Si cela se produit, vous souhaitez partager le module1.componentA pour qu'il soit accessible dans d'autres modules. Ainsi, si vous partagez le module1.componentA dans un module partagé, le module1.componentA sera utilisable dans d'autres modules (en dehors de module1) et chaque module qui importera le module partagé pourra accéder au sélecteur dans ses modèles en injectant la variable déclarée @Input().

6
Guntram

Ceci est destiné aux personnes qui utilisent du JavaScript pur à la place de Type Script. 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 ng.forms.FormsModule. Après avoir effectué les modifications, ma propriété imports de la méthode NgModule ressemblait à celle ci-dessous

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

Bon codage!

6
James Poulose

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

J'ai terminé ma migration (en introduisant un nouveau fichier app.module.ts, en modifiant package.json pour y inclure les nouvelles versions et les modules manquants, et enfin en modifiant mon main.ts pour démarrer en conséquence, en fonction de la Angular2 exemple de démarrage rapide ).

J'ai fait un npm update puis un npm outdated pour confirmer que les versions installées étaient correctes, toujours pas de chance.

J'ai fini par effacer complètement le dossier node_modules et réinstaller avec npm install - Voilà! Problème résolu.

5
Rots

Quand j'ai commencé le tutoriel, main.ts était légèrement différent de ce qu'il est maintenant. Il semble très similaire, mais notez les différences (le premier est correct).

Correct:

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

platformBrowserDynamic().bootstrapModule(AppModule);

Ancien code de tutoriel:

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

Pour toute version de Angular 2, vous devez importer FormsModule dans votre fichier app.module.ts afin de résoudre le problème.

1
Siddhartha Thota

Récemment, j'ai constaté que l'erreur se produit non seulement dans le cas où vous avez oublié d'importer FormsModule dans votre module. Dans mon cas, le problème était dans ce code

<input type="text" class="form-control" id="firstName"
                   formControlName="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

Je le répare avec le changement formControlName -> name

<input type="text" class="form-control" id="firstName"
                   name="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

J'espère que cette réponse fera gagner du temps à quelqu'un qui a le même problème.

0
Nikita Sychou