components: Can't bind to 'ngModel' since it isn't a known property of 'md-input'.

I’ve seen some similar issues of people that have been getting this issue, but none of them seem to apply to the issue that I’m having as I’m using angular 2.0.1. I cloned this project so I could get a starting point that has material2 already in it: https://github.com/jelbourn/material2-app

And when I try to do an input that has [(ngModel)]="something" it gives me

zone.js:355 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("px;" cellspacing="0">
                <tr>
                  <td><md-input placeholder="First name" [ERROR ->][(ngModel)]="currentProfileName"></md-input></td>
                  <td><md-input placeholder="Last N"): AppComponent@38:57 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("px;" cellspacing="0">
                <tr>
                  <td><md-input placeholder="First name" [ERROR ->][(ngModel)]="currentProfileName"></md-input></td>
                  <td><md-input placeholder="Last N"): AppComponent@38:57
    at TemplateParser.parse (http://localhost:4200/main.bundle.js:15675:19)
    at RuntimeCompiler._compileTemplate (http://localhost:4200/main.bundle.js:34857:51)
    at http://localhost:4200/main.bundle.js:34780:83
    at Set.forEach (native)
    at compile (http://localhost:4200/main.bundle.js:34780:47)
    at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:76868:28)
    at Zone.run (http://localhost:4200/main.bundle.js:76761:43)
    at http://localhost:4200/main.bundle.js:77127:57
    at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:76901:37)
    at Zone.runTask (http://localhost:4200/main.bundle.js:76801:47)consoleError @ zone.js:355_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386
zone.js:357 Error: Uncaught (in promise): Error: Template parse errors:(…)consoleError @ zone.js:357_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386

Here’s my HTML it’s blowing up on (which is on app.component.html):

<td><md-input placeholder="First name" [(ngModel)]="currentProfileName"></md-input></td>

And my component definition in app.component.ts

import {Component} from '@angular/core';
import { ProfileService, Profile } from './services/profile.service';

@Component({
  selector: 'app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [ProfileService]
})


export class AppComponent {

  currentProfileName = 'test';

}

Edit: Here’s my package.json file:

"dependencies": {
    "@angular/common": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/core": "^2.0.0",
    "@angular/forms": "^2.0.0",
    "@angular/http": "^2.0.0",
    "@angular/platform-browser": "^2.0.0",
    "@angular/platform-browser-dynamic": "^2.0.0",
    "@angular/material": "experimental",
    "@angular/router": "^3.0.0",
    "core-js": "^2.4.0",
    "rxjs": "5.0.0-beta.11",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.32",
    "@types/jasmine": "^2.2.30",
    "angular-cli": "^1.0.0-beta.15",
    "codelyzer": "~0.0.26",
    "firebase-tools": "^3.0.7",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "0.2.3",
    "karma-jasmine": "0.3.8",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.3",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "^2.0.0"
  }

And here’s the package.json of my node_modules/@angular/core

{
  "_args": [
    [
      {
        "raw": "@angular/core@^2.0.0",
        "scope": "@angular",
        "escapedName": "@angular%2fcore",
        "name": "@angular/core",
        "rawSpec": "^2.0.0",
        "spec": ">=2.0.0 <3.0.0",
        "type": "range"
      },
      "/Users/joshterrill/Projects/GenericClientAngular2"
    ]
  ],
  "_from": "@angular/core@>=2.0.0 <3.0.0",
  "_id": "@angular/core@2.0.1",
  "_inCache": true,
  "_location": "/@angular/core",
  "_nodeVersion": "5.4.1",
  "_npmOperationalInternal": {
    "host": "packages-12-west.internal.npmjs.com",
    "tmp": "tmp/core-2.0.1.tgz_1474655034149_0.24713210249319673"
  },
  "_npmUser": {
    "name": "angular",
    "email": "angular-core+npm@google.com"
  },
  "_npmVersion": "3.9.2",
  "_phantomChildren": {},
  "_requested": {
    "raw": "@angular/core@^2.0.0",
    "scope": "@angular",
    "escapedName": "@angular%2fcore",
    "name": "@angular/core",
    "rawSpec": "^2.0.0",
    "spec": ">=2.0.0 <3.0.0",
    "type": "range"
  },
  "_requiredBy": [
    "/",
    "/angular-cli"
  ],
  "_resolved": "https://registry.npmjs.org/@angular/core/-/core-2.0.1.tgz",
  "_shasum": "c0cd8287bbaf367b350c189ac010aee443f4a3c8",
  "_shrinkwrap": null,
  "_spec": "@angular/core@^2.0.0",
  "_where": "/Users/joshterrill/Projects/GenericClientAngular2",
  "author": {
    "name": "angular"
  },
  "bugs": {
    "url": "https://github.com/angular/angular/issues"
  },
  "dependencies": {},
  "description": "Angular - the core framework",
  "devDependencies": {},
  "directories": {},
  "dist": {
    "shasum": "c0cd8287bbaf367b350c189ac010aee443f4a3c8",
    "tarball": "https://registry.npmjs.org/@angular/core/-/core-2.0.1.tgz"
  },
  "homepage": "https://github.com/angular/angular#readme",
  "license": "MIT",
  "main": "bundles/core.umd.js",
  "maintainers": [
    {
      "name": "angular",
      "email": "angular-core+npm@google.com"
    }
  ],
  "module": "index.js",
  "name": "@angular/core",
  "optionalDependencies": {},
  "peerDependencies": {
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.21"
  },
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/angular/angular.git"
  },
  "scripts": {},
  "typings": "index.d.ts",
  "version": "2.0.1"
}

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 30 (5 by maintainers)

Most upvoted comments

You probably need to import the FormsModule in you app.module.

+36

slmyers on Sep 27, 2016

Perfect thanks.

Here’s the solution:

import {FormsModule} from '@angular/forms';
@NgModule({
  imports: [
    BrowserModule,
    MaterialModule.forRoot(),
    FormsModule
  ],
  declarations: [AppComponent],
  entryComponents: [AppComponent],
})

+15

joshterrill on Sep 27, 2016

I’m still having this issue:

	Error: Template parse errors:
	Can't bind to 'ngModel' since it isn't a known property of 'input'. ("<label class="blue-text" for="quantity">QTY
	    <input [ERROR ->][(ngModel)]="inventory.quantity"
	           (change)="onChange(inventory)"
	           value="{{ inven"): UpcInventoryItem@1:11

I’m updating from RC4 -> RC5.

I’ve added app.module.ts and included both form packages.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {DeprecatedFormsModule} from '@angular/common';
import { FormsModule }   from '@angular/forms';

import { ProductManagement }  from './product_management/ProductManagement';

@NgModule({
    imports: [ BrowserModule, DeprecatedFormsModule, FormsModule ],       // module dependencies
    declarations: [ ProductManagement ],   // components and directives
    bootstrap: [ ProductManagement ],     // root component
    providers: []                    // services
})
export class AppModule { }

cdcooksey on Feb 22, 2017

Yeah in my case the html-loader was lowercasing the M in ngModel

jrood on Feb 3, 2017

@webtechy In the angular 2 webpack tutorial you can see in the config/webpack.prod.js file they have a similar kind of workaround:

new webpack.LoaderOptionsPlugin({
  htmlLoader: {
    minimize: false // workaround for ng2
  }
})

jrood on Feb 3, 2017

I currently have this same problem, but I already am including the FormsModule. To make it weirder, I only have this issue when I do webpack -p but not when I do regular webpack.

jrood on Jan 30, 2017

That’s the solution!! Even it solved my work

srisrim on Jan 20, 2017

As of 12/26/2017, I’ve bumped into the same problem creating the new default project with Angular CLI… After creating a new default Angular app, I get an error in Visual Studio Code on Windows 10 when I added the ngmodel. It appears the solution posted by joshterrill above seems to fix the problem. However, I am following a up-to-date Udemy Angular course by Maximilian Schwarzmüller and following his step-by-step instructions using Angular CLI seem to break the code without this fix.

jontiefer on Dec 27, 2017

@zachonahill Unfortunately not. As far as I can tell so far, there isn’t a fix and this issue shouldn’t be closed.

My team is still stuck on Angular2 RC4 due to these issues.

We’re investigating mounting the RC4 app inside a new Angular5 build and then migrating the code one piece at a time.

Maybe @joshterrill can point us in the right direction.

cdcooksey on Nov 10, 2017

I had the same issue. Turns of I had [([ngModle])] rather than [(ngModel)] so make sure to double check that if you are running into this issue and its not an error importing Forms Module

raehart on Feb 15, 2017

Hello, i’m using angular 7, i already imported FormsModule in the app.module and added to the imports but it keeps giving me the same error… Anyone solved it already?

proliv on Aug 16, 2019

I faced the same issue as I was typing [{ngModel}] instead of [(ngModel)]

mdshahzad on Apr 26, 2018