Question Impossible de 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 le 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 cueilleur de Hero mais je ne vois aucune différence.

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

629
2017-08-11 09:44


origine


Réponses:


Oui c'est tout, dans l'app.module.ts, je viens d'ajouter:

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

[...]

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

909
2017-08-11 12:30



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


402
2017-08-11 10:58



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

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

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

Probablement ce n'est pas un plaisir pour le AngularJs développeurs comme tu pourrais utiliserng-modèle partout où vous voulez, mais comme Angular essaie de séparer les modules pour utiliser ce que vous voulez, ngModel est en FormsModule à présent.

Aussi, si vous utilisez ReactiveFormsModule, doit l'importer aussi.

Alors cherche simplement app.module.ts et assurez-vous d'avoir 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 { }

Aussi, ce sont les commentaires de départ 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 vrai...

[ngModelOptions]="{standalone: true}"

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


119
2017-10-10 12:46



Lancer cela pourrait aider quelqu'un.

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

Si vous utilisez le FormsModule Seulement dans le AuthModule alors vous n'auriez pas besoin d'importer le FormModule DANS 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 { }

Puis oubliez d'importer dans AppModule si vous n'utilisez pas le FormsModule n'importe où ailleurs.


37
2017-09-24 13:06



Il y a deux étapes à suivre pour se débarrasser de cette erreur

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

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


26
2017-12-09 07:00



importer FormsModule dans votre module d'application.

cela permettrait à votre application de 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 { }

15
2017-12-25 09:43



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

app.module.ts 

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

14
2017-10-29 05:05



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

En Angular 4, la syntaxe doit être

[(ngModel)]

J'espère que cela t'aides.


11
2017-08-04 05:49