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": "[e-mail]"
  },
  "_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": "[e-mail]"
    }
  ],
  "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],
})