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

joshterrill · 2016-09-27T01:52:18Z

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

The text was updated successfully, but these errors were encountered:

slmyers · 2016-09-27T03:52:02Z

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

joshterrill · 2016-09-27T05:36:53Z

Perfect thanks.

Here's the solution:

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

srisrim · 2017-01-20T12:37:33Z

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

jrood · 2017-01-30T23:06:17Z

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 · 2017-02-03T00:45:11Z

@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 · 2017-02-03T01:55:59Z

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

BenGWeeks · 2017-02-03T02:03:24Z

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

jrood · 2017-02-03T03:38:19Z

@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 · 2017-02-03T03:44:13Z

@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 · 2017-02-03T07:29:25Z

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

raehart · 2017-02-15T08:53:08Z

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 · 2017-02-22T21:31:10Z

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 · 2017-04-20T10:45:27Z

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

ghost · 2017-05-02T04:45:32Z

@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 · 2017-09-09T05:34:55Z

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 · 2017-09-21T08:41:14Z

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

kvuppla · 2017-09-22T16:30:22Z

Any update on this issue? Any resolution?

ssuman · 2017-10-11T04:54:12Z

Try this in your webpack config. @kvuppla

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

zachonahill · 2017-11-10T22:59:06Z

@cdcooksey Did you ever find a solution for this?

cdcooksey · 2017-11-10T23:06:25Z

@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 · 2017-11-10T23:10:02Z

@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 · 2017-11-10T23:22:34Z

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 · 2017-11-11T22:14:59Z

@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 · 2017-12-27T00:07:21Z

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 · 2018-04-26T12:09:46Z

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

BOPOHOB · 2018-09-16T16:12:38Z

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 · 2019-05-26T20:49:49Z

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

proliv · 2019-08-16T16:01:19Z

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 · 2019-08-30T06:30:16Z

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 · 2019-10-10T00:04:14Z

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

joshterrill closed this as completed Sep 27, 2016

BenGWeeks mentioned this issue Feb 3, 2017

How to turn off Mangle? (keep_fnames: true) SharePoint/sp-dev-docs#407

Closed

5 tasks

noghte mentioned this issue Jun 4, 2018

Can't bind to 'ngModel' since it isn't a known property of 'mat-select' ismaproco/angular4-material-begin#1

Open

angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 10, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

joshterrill commented Sep 27, 2016 •

edited

Loading

slmyers commented Sep 27, 2016

joshterrill commented Sep 27, 2016

srisrim commented Jan 20, 2017

jrood commented Jan 30, 2017

BenGWeeks commented Feb 3, 2017 •

edited

Loading

jrood commented Feb 3, 2017

BenGWeeks commented Feb 3, 2017

jrood commented Feb 3, 2017

jrood commented Feb 3, 2017

BenGWeeks commented Feb 3, 2017

raehart commented Feb 15, 2017

cdcooksey commented Feb 22, 2017

Neltherion commented Apr 20, 2017

ghost commented May 2, 2017

mswaminath commented Sep 9, 2017

jayeshkorat18 commented Sep 21, 2017

kvuppla commented Sep 22, 2017

ssuman commented Oct 11, 2017

zachonahill commented Nov 10, 2017

cdcooksey commented Nov 10, 2017

zachonahill commented Nov 10, 2017

jrood commented Nov 10, 2017

joshterrill commented Nov 11, 2017

jontiefer commented Dec 27, 2017 •

edited

Loading

mdshahzad commented Apr 26, 2018

BOPOHOB commented Sep 16, 2018

Nkhll commented May 26, 2019 •

edited

Loading

proliv commented Aug 16, 2019

anees221 commented Aug 30, 2019

angular-automatic-lock-bot bot commented Oct 10, 2019

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

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

Comments

joshterrill commented Sep 27, 2016 • edited Loading

slmyers commented Sep 27, 2016

joshterrill commented Sep 27, 2016

srisrim commented Jan 20, 2017

jrood commented Jan 30, 2017

BenGWeeks commented Feb 3, 2017 • edited Loading

jrood commented Feb 3, 2017

BenGWeeks commented Feb 3, 2017

jrood commented Feb 3, 2017

jrood commented Feb 3, 2017

BenGWeeks commented Feb 3, 2017

raehart commented Feb 15, 2017

cdcooksey commented Feb 22, 2017

Neltherion commented Apr 20, 2017

ghost commented May 2, 2017

mswaminath commented Sep 9, 2017

jayeshkorat18 commented Sep 21, 2017

kvuppla commented Sep 22, 2017

ssuman commented Oct 11, 2017

zachonahill commented Nov 10, 2017

cdcooksey commented Nov 10, 2017

zachonahill commented Nov 10, 2017

jrood commented Nov 10, 2017

joshterrill commented Nov 11, 2017

jontiefer commented Dec 27, 2017 • edited Loading

mdshahzad commented Apr 26, 2018

BOPOHOB commented Sep 16, 2018

Nkhll commented May 26, 2019 • edited Loading

proliv commented Aug 16, 2019

anees221 commented Aug 30, 2019

angular-automatic-lock-bot bot commented Oct 10, 2019

joshterrill commented Sep 27, 2016 •

edited

Loading

BenGWeeks commented Feb 3, 2017 •

edited

Loading

jontiefer commented Dec 27, 2017 •

edited

Loading

Nkhll commented May 26, 2019 •

edited

Loading