Can't bind to 'ngModel' since it isn&#

问题:

I\'ve got the following error when launching my Angular app, even if the component is not displayed.

I have to comment out the so that my app works.

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: 

I\'m looking at the Hero plunker but I don\'t see any difference.

Here is the component file:

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

回答1:

Yes that\'s it, in the app.module.ts, I just added :

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

[...]

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

回答2:

In order to be able to use two-way data binding for form inputs you need to import theFormsModule package in your Angular module. For more info see the Angular 2 official tutorial here and the official documentation for forms

回答3:

For using [(ngModel)] in Angular 2, 4 & 5+, You need to import FormsModule from Angular form...

Also it is in this path under forms in Angular repo in github:

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

Probably this is not a very pleasure for the AngularJs developers as you could use ng-model everywhere anytime before, but as Angular tries to separate modules to use whatever you\'d like you to want to use at the time, ngModel is in FormsModule now.

Also if you are using ReactiveFormsModule, needs to import it too.

So simply looks for app.module.ts and make sure you have FormsModule imported in...

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

Also this is the current starting comments for Angular4 ngModel in 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!
 */

If you\'d like to use your input, not in a form, you can use it with ngModelOptions and make standalone true...

[ngModelOptions]=\"{standalone: true}\"

For more info, Look at ng_model in Angular section here

回答4:

Throwing in this might help someone.

Assuming you have created a new NgModule, say AuthModule dedicated to handling your Auth needs, make sure to import FormsModule in that AuthModule too.

If you\'ll be using the FormsModule ONLY in the AuthModule then you wouldn\'t need to import the FormModule IN the default AppModule

So something like this in the 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 { }

Then forget about importing in AppModule if you don\'t use the FormsModule anywhere else.

回答5:

You need to import the FormsModule

Open app.module.ts

and add line

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

and

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

回答6:

There are two steps you need to follow to get rid of this error

1. import FormsModule in your app module
2. Pass it as value of imports in @NgModule decorator

basically app.module.ts should look like below :

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

Hope it helps

回答7:

import FormsModule in you app module.

it would let your application running well.

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

回答8:

If you need to use [(ngModel)] first do you need to import FormsModule in app.module.ts and then add in a list of imports. Something like this:

app.module.ts

1. import import {FormsModule} from \"@angular/forms\";
2. add in imports imports: [ BrowserModule, FormsModule ],

app.component.ts

1. Example: <input type=\"text\" [(ngModel)]=\"name\" >
2. and then <h1>your name is: {{name}} </h1>

回答9:

I know this question is about Angular 2, but I am on Angular 4 and none of these answers helped.

In Angular 4 the syntax needs to be

[(ngModel)]

Hope this helps.

回答10:

Simple Soultion : In app.module.ts

***Example 1***
import {FormsModule} from \"@angular/forms\";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

Example 2 :

If you want to use [(ngModel)] then you have to import FormsModule in app.module.ts

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

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

回答11:

If someone is still getting errors after applying the accepted solution, it could be possibly because you have a separate module file for the component in which you want to use the ngModel property in input tag. In that case, apply the accepted solution in the component\'s module.ts file as well.

回答12:

I\'m using Angular 5.

In my case, I needed to import RactiveFormsModule too.

app.module.ts (or anymodule.module.ts)

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

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

回答13:

if you are still getting the error after importing FormsModule correctly then check in your terminal or (windows console) because your project is not compiling (because of another error that could be anything) and your solution has not been reflected in your browser!

In my case, my console had the following unrelated error: Property \'retrieveGithubUser\' does not exist on type \'ApiService\'.

回答14:

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

回答15:

Sometimes you get this error when you try to use a component from a module, which is not shared, in a different module.

For example, you have 2 modules with module1.componentA.component.ts and module2.componentC.component.ts and you try to use the selector from module1.componentA.component.ts in a template inside module2 (e.g. <module1-componentA [someInputVariableInModule1]=\"variableFromHTTPRequestInModule2\">), it will throw the error that the someInputVariableInModule1 is not available inside module1.componentA.component.ts - even though you have the @Input() someInputVariableInModule1 in the module1.componentA.

If this happens, you want to share the module1.componentA to be accessible in other modules. So if you share the module1.componentA inside a sharedModule, the module1.componentA will be usable inside other modules (outside from module1), and every module importing the sharedModule will be able to access the selector in their templates injecting the @Input() declared variable.

回答16:

For my scenario, I had to import both [CommonModule] and [FormsModule] to my 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 { }

回答17:

This is for the folks who use plain JavaScript instead of Type Script. In addition to referencing the forms script file on top of the page like below

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

you should also tell the the module loader to load the ng.forms.FormsModule. After making the changes my imports property of NgModule method looked like below

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

Happy coding!

回答18:

In the module you are willing to use ngModel you have to import FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

回答19:

When I first did the tutorial, main.ts looked slightly different from what it is now. It looks very similar, but note the differences (the top one is correct).

Correct:

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

platformBrowserDynamic().bootstrapModule(AppModule);

Old tutorial code:

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

回答20:

I upgraded from RC1 to RC5 and received this error.

I completed my migration (introducing a new app.module.ts file, changing package.json to include new versions and missing modules, and finally changing my main.ts to boot accordingly, based on the Angular2 quick start example).

I did an npm update and then an npm outdated to confirm the versions installed were correct, still no luck.

I ended up completely wiping the node_modules folder and reinstalling with npm install - Voila! Problem solved.

回答21:

ngModel is coming from FormsModule.There are some cases when you can receive this kind of error:

1. You didn\'t import the FormsModule into import array of module where your component is declared, component in which the ngModel is used.
2. You have import the FormsModule into one module which is inherited of another module. In this case you have two options:
   • let the FormsModule imported into the import array from both modules:module1 and module2. As rule: Importing a module does NOT provide access to its imported modules.(Imports are not inherited)

• declare the FormsModule into the import and export arrays in module1 to be abble to see it in model2 also

1. (In some version I faced this problem) You have imported correctly the FormsModule but the problem is on the input HTML tag. You must add the name tag attribute for input and the object bound name in [(ngModel)] must be the same as the name into the name attribute

   

回答22:

For any version from Angular 2, you need to import FormsModule in your app.module.ts file and it will fix the issue.