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

[joshterrill]

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

[slmyers]

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

[joshterrill]

Perfect thanks.

Here's the solution:

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

[srisrim]

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

[jrood]

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.

[BenGWeeks]

@jrood - did you find a solution for this as I am experiencing a similar scenario as works on the development workbench, but not when I build for production.

Related issue:

SharePoint/sp-dev-docs#406

[jrood]

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

[BenGWeeks]

How could you tell it was doing that, and how did you resolve that?

[jrood]

@webtechy I could tell because my error message actually said Can't bind to 'ngmodel' with a lowercase m. And I fixed it by using html-loader?-minimize instead of just html-loader

[jrood]

@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
  }
})

[BenGWeeks]

Well spotted! I'll check for that too later!

[raehart]

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

[cdcooksey]

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

[Neltherion]

I have this problem too... it blows up all the other components...