Angular tutorial error input [ngModel]="selectedHero.name"

Question

I'm running the Angular tutorial. I'm stuck.

I did a search on here, I found a similar error , but it doesn't help me.

The error I'm getting:

Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: The '?.' operator cannot be used in the assignment at column 20 in [selectedHero?.name=$event] in ng:///AppModule/AppComponent.html@15:19 ("
          <div>
            <label>name: </label>
            <input [ERROR ->][(ngModel)]="selectedHero?.name" placeholder="name"/>
          </div>
        </div>
"): ng:///AppModule/AppComponent.html@15:19

I tried with and without the ?. Doesn't make difference. I tried the line:

<input [ngModel]="selectedHero?.name" (ngModelChange)="selectedHero.name = $event" />

I went back to the page and copied the entire code, it doesn't change anything.

I got the same error on the very first part of the tutorial too.

You can't use the `?` in two-way binding. Your second example is correct. `(ngModelChange)="selectedHero?.name ? selectedHero.name = $event : null">` is even better. What happens with the second approach? — eko, Jun 15 '17 at 15:55
I put this in : , and I get nothing. I just have an edit box, but nothing it is in it. — user269964, Jun 15 '17 at 16:58
Actually, I tried that too. Didn't work. Unhandled Promise rejection: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. — user269964, Jun 15 '17 at 17:42
this is my package.json file. "dependencies": { "@angular/common": "~4.0.0", "@angular/compiler": "~4.0.0", "@angular/core": "~4.0.0", "@angular/forms": "~4.0.0", "@angular/http": "~4.0.0", "@angular/platform-browser": "~4.0.0", "@angular/platform-browser-dynamic": "~4.0.0", "@angular/router": "~4.0.0", "angular-in-memory-web-api": "~0.3.0", "systemjs": "0.19.40", "core-js": "^2.4.1", "rxjs": "5.0.1", "zone.js": "^0.8.4" }, — user269964, Jun 15 '17 at 17:47

Vivek Doshi · Accepted Answer · 2017-06-15T17:47:03.113

0

Change this line :

From :

<input name='name' [ngModel]="selectedHero?.name" (ngModelChange)="selectedHero.name = $event" />

To :

<input name='name' [ngModel]="selectedHero?.name" (ngModelChange)="selectedHero?.name ? selectedHero.name = $event.target.value : ''" />

edited Jun 15 '17 at 17:47

answered Jun 15 '17 at 17:20

Vivek Doshi

56,649
12
110
122

I get this error: Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input' – user269964 Jun 15 '17 at 17:45
please add formModule in app.module.ts – Vivek Doshi Jun 15 '17 at 17:47
That was it. I kept trying to add it in, but I didn't notice the modules. It was a completely different file. Everytime I added it to my components file I was getting an error. – user269964 Jun 15 '17 at 17:52
Great you made it ... :) – Vivek Doshi Jun 15 '17 at 17:53
For any one else reading this, I had to go back to the code in the tutorial It wasn't updating otherwise. – user269964 Jun 15 '17 at 17:55
you have to provide the name field also – Vivek Doshi Jun 15 '17 at 17:56
@user269964 , will you please also upvote the answer, please? – Vivek Doshi Oct 26 '17 at 16:22
this will not works for two way binding [(ngModel)]="prop.val" – niran Apr 15 '20 at 16:40

Angular tutorial error input [ngModel]="selectedHero.name"

1 Answers1