angular: NG 2.1.2 Error 'There is no directive with "exportAs" set to "ngModel"'

I’m submitting a … (check one with “x”)

[X] bug report
[ ] feature request
[ ] support request

Current behavior

With the latest stable version of Angular2, the forms module loaded, an error is thrown when attempting to use ngModel. What’s odd here is ngForm is found and works fine. It’s not until I attempt to use ngModel as a variable does this error get thrown.

zone.js:355
Unhandled Promise rejection: Template parse errors:
There is no directive with "exportAs" set to "ngModel" ("
                placeholder="Name"
                [(ngModel)="model.name"
                [ERROR ->]#name="ngModel"
                required 
            />
"): AppComponent@9:16 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
There is no directive with "exportAs" set to "ngModel" ("
                placeholder="Name"
                [(ngModel)="model.name"
                [ERROR ->]#name="ngModel"
                required 
            />
"): AppComponent@9:16
    at TemplateParser.parse (http://localhost:8080/dist/bundle.js:12402:19)
    at RuntimeCompiler._compileTemplate (http://localhost:8080/dist/bundle.js:30826:51)
    at http://localhost:8080/dist/bundle.js:30731:83
    at Set.forEach (native)
    at compile (http://localhost:8080/dist/bundle.js:30731:47)
    at ZoneDelegate.invoke (http://localhost:8080/dist/bundle.js:69130:28)
    at Zone.run (http://localhost:8080/dist/bundle.js:69023:43)
    at http://localhost:8080/dist/bundle.js:69389:57
    at ZoneDelegate.invokeTask (http://localhost:8080/dist/bundle.js:69163:37)
    at Zone.runTask (http://localhost:8080/dist/bundle.js:69063:47)consoleError @ zone.js:355_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386
zone.js:357Error: Uncaught (in promise): Error: Template parse errors:(…)consoleError @ zone.js:357_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386

Expected behavior

Error should not be thrown and ngModel should work as it normally does.

Minimal reproduction of the problem with instructions

I put together an example that is easy to get running at:

https://github.com/vangorra/ngModelIssueExample

Steps to reproduce:

git clone https://github.com/vangorra/ngModelIssueExample.git
cd ngModelIssueExample
npm install
npm run build
npm run serve

What is the motivation / use case for changing the behavior?

The example I put together is the best reference.

Please tell us about your environment:

Angular version: 2.1.2

Browser: – Ubuntu 16.04 Chrome Version 54.0.2840.71 (64-bit) – Ubuntu 16.04 Firefox Version 49.0.2 (64-Bit)
Language: Typescript
Node (for AoT issues): v4.3.1

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 23 (4 by maintainers)

Most upvoted comments

Just to help if anyone else gets this. I also had the error and it was because I had a template like this. <input type=“text” required [(ngModel]]=“item.Description” required #dDesc=“ngModel”/>

with 2 closing square brackets on ngModel when it should have been

+12

SRJames on May 8, 2017

I got this error for not importing the forms module into the module that I was using. This error could be much more descriptive about what the actual problem is.

aaronfrost on Aug 22, 2017

Wow. I cannot believe I spent that much time on such a trivial error. Sorry for the trouble.

vangorra on Nov 11, 2016

I had the same issue because i forgot to add [(ngModel)], but had #password="ngModel", i.e. <input name="password" #password="ngModel"> instead of <input name="password" [(ngModel)]="password" #password="ngModel">

pmilic021 on Jan 5, 2018

me too!!

<input name="password"  ([ngModel])="password" #passwordRef="ngModel">

both the IDE and Chrome prompts me this error : Error 'There is no directive with "exportAs" set to "ngModel"'

changed ([ngModel])="password" to [(ngModel)]="password" solves this problem but I really hate type this tedious monster. why not introduce some @ngModel like syntax as two way data binding…

or remove the whole TEMPLATE DRIVEN FORM syntax, it’s really confusing.

uniquejava on Jun 25, 2017

It was a syntax issue on my template. A quote or bracket want properly closed.

vangorra on Apr 11, 2017

Your ngModel is encapsulated incorrectly. It starts with a square bracket and paren which is fine. It ends with two square brackets.

vangorra on Mar 23, 2019

I also faced this issue and i needed was to changed #name="ngModel " to #name="ngModel" just the space after the ngModel

iNezerr on Aug 22, 2018