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

Question

J'ai obtenu l'erreur suivante 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 Hero plunker, mais je ne vois pas de différence avec mon code.

Voici le fichier du 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";
}

Answer 1

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

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

[...]

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

Answer 2

Afin de pouvoir utiliser la liaison de données bidirectionnelle pour les entrées de formulaire, vous devez importer l'option FormsModule dans votre module Angular.

Pour plus d'informations, voir le tutoriel officiel d'Angular 2 aquí et la documentation officielle de formulaires .

Answer 3

Pour l'utilisation [(ngModel)] en Angulaire 2 , 4 & 5+ vous devez importer FormsModule de la forme angulaire...

De plus, c'est dans ce chemin sous les formes dans le Référentiel Angular en GitHub :

angular / packages / forms / src / directives / ng_model.ts

Ce n'est sans doute pas très agréable pour le Développeurs AngularJS comme vous pourriez utiliser ng-model partout à tout moment auparavant, mais comme Angular essaie de séparer les modules pour utiliser ce que vous souhaitez utiliser à ce moment-là, ngModel est en FormsModule maintenant.

De même, si vous utilisez ReactiveFormsModule il doit aussi l'importer.

Il suffit donc de chercher app.module.ts et assurez-vous que vous avez FormsModule 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 { }

Voici également les commentaires de départ actuels pour Angular4 ngModel en 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 voulez utiliser votre entrée, pas dans un formulaire, vous pouvez l'utiliser avec ngModelOptions et rendre autonome vrai ...

[ngModelOptions]="{standalone: true}"

Pour plus d'informations, consultez le site ng_model dans la section Angulaire aquí .

Answer 4

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

Si vous utilisez le FormsModule sólo dans le AuthModule alors vous n'auriez pas besoin d'importer le FormModule sur le défaut AppModule .

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

Alors oubliez l'importation dans AppModule si vous n'utilisez pas le FormsModule n'importe où ailleurs.

Answer 5

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

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

En gros, le fichier app.module.ts devrait ressembler à ce qui suit :

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