Components: 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/[email protected]",
  "_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": "[email protected]"
  },
  "_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": "[email protected]"
    }
  ],
  "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:

https://github.com/SharePoint/sp-dev-docs/issues/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...

[ghost]

@Neltherion If you still have this problem after including FormsModlue to your AppModule, please check if you are using any html minification tool whereas angular2 directive is case-sensitive.
You can also try to use ReactiveFormsModule as a substitution.

[mswaminath]

As said by @jrood, it happens only when using webpack -p and not with regular webpack. And the below loader option doesn't matter whether exist or not,

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

[jayeshkorat18]

I have this problem too... I have also import 'FormsModule' but not solve

[kvuppla]

Any update on this issue? Any resolution?

[ssuman]

Try this in your webpack config. @kvuppla

new webpack.optimize.UglifyJsPlugin({
    beautify: false,
    mangle: false,
    compress: { screw_ie8: true },
    comments: false,
  }),

[zachonahill]

@cdcooksey Did you ever find a solution for this?

[cdcooksey]

@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.

[zachonahill]

@cdcooksey Thanks for the quick reply. That's unfortunate, but good to know. Not wasting more time trying to make it work. Will look into other options

[jrood]

Honestly, I stopped using manual webpack configurations a while ago in favor of the Angular CLI. I would wholeheartedly recommend switching if you can.

[joshterrill]

@cdcooksey I haven't had this issue since I posted about the original solution I came up with, and my team hasn't tried to upgrade our application. Sorry I can't be of much more help.

[jontiefer]

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.

[mdshahzad]

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

[BOPOHOB]

Any update on this issue? Any resolution?

I solved the same problem. In my case it was explicitly importing Material module into the parent module despite the fact that Material is only invoked from the child.
You also may fix the problem if you stop using Material in components which are directly imported into the parent module.

[Nkhll]

Goto your app.module > import { FormsModule } from '@angular/forms'; and create an entry in imports.

[proliv]

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?

[anees221]

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

This is a proper answer mate.Thanks Allah You save me from wasting time.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}