ngModel 2-way data binding not working with Visual Studio 2017 Angular 2 Single Page Application Template

Question

I have started a Visual Studio Community 2017 project using the Angular Single Page Application (SPA) template, as described in the .NET Web Development and Tools Blog:

https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

2-way data binding using [(ngModel)] is not working.

For example: In login.component.html:

<input [(ngModel)]="x" name="x"/>
<h1>{{x}}</h1>

In login.component.ts:

export class LoginComponent {    
    x = 5;
}

Result:

When I change the value in the input box, the text in the h1 tag should change as well. But it doesn't change.

I have already tried importing the FormsModule from @angular/forms and adding FormsModule to the imports for the @NgModule decorator in app.module.ts as noted here: Angular 2 two way binding using ngModel is not working.

More info (added 2017-06-12): Note that the app module is divided up into three separate files

app.module.shared.ts:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from 
'./components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { LoginComponent } from './components/login/login.component'; 
//dcowan: for login page
import { TimeEntryComponent } from 
'./components/timeentry/timeentry.component'; //dcowan: for time entry page

export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
    AppComponent,
    NavMenuComponent,
    CounterComponent,
    FetchDataComponent,
    HomeComponent,
    LoginComponent, //dcowan: for login page
    TimeEntryComponent //dcowan: for time entry page
],
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'login', component: LoginComponent }, //dcowan: for login page
        { path: 'timeentry', component: TimeEntryComponent }, //dcowan: for time entry page
        { path: 'counter', component: CounterComponent },
        { path: 'fetch-data', component: FetchDataComponent },
        { path: '**', redirectTo: 'home' }
    ])
]

};

app.module.client.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//import { FormsModule } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { sharedConfig } from './app.module.shared';

// dcowan: Imports for loading & configuring the in-memory web api
//import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
//import { InMemoryDataService } from './in-memory-data.service';

import { DemoDbService } from './demo-db.service';


@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
    BrowserModule,
    //FormsModule,
    FormsModule,
    HttpModule,                
    ...sharedConfig.imports
],
providers: [DemoDbService,//dcowan: Dovico Web API
    { provide: 'ORIGIN_URL', useValue: location.origin }
] 
})
export class AppModule {
}

app.module.server.ts:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { sharedConfig } from './app.module.shared';
import { FormsModule } from '@angular/forms';

@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
    FormsModule,
    ServerModule,
    ...sharedConfig.imports
]
})
export class AppModule {
}

OK, I've added the code for NgModule @brijmcq. – dcowan33 Jun 12 '17 at 12:00 — dcowan33, Jun 12 '17 at 12:00

score 0 · Answer 1 · answered Jun 12 '17 at 18:00

0

I am experiencing the same. Temporarily, I am breaking up 2 way binding into attribute and event binding.

<input [value]="x" (input)="x=$event.target.value">
<h1>{{x}}</h1>

answered Jun 12 '17 at 18:00

Mike

1

score 0 · Answer 2 · answered Jun 13 '17 at 00:18

0

I have this error too. Try to import your FormsModule in the app.module.shared instead of app.module.server and app.module.client

answered Jun 13 '17 at 00:18

brijmcq

3,354
2
17
34

Ok, I tried that and ngModel now works in Chrome, Opera, Firefox and Edge. But it doesn't work in Internet Explorer 11. Oddly enough, I tried putting the FormsModule imports back in app.module.client and app.module.server (the way it is shown above) and it now works (except in Internet Explorer 11). Thanks! – dcowan33 Jun 13 '17 at 19:17

score 0 · Answer 3 · answered Oct 10 '17 at 11:35

0

I fixed it like this using (keyup) and [ngModel]

(keyup)="onKey($event)" 
[ngModel]="model.input"

in keyup we update model.input

public onKey(event: any) {
       this.model.input = event.target.value;
}

answered Oct 10 '17 at 11:35

Adel Tabareh

1,478
14
10

score 0 · Answer 4 · edited Mar 22 '18 at 23:54

0

If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

this code with property name:

<input name="nome" [(ngModel)]="nome" />

this code without property name:

<input [(ngModel)]="nome" [ngModelOptions]="{standalone: true}" />

edited Mar 22 '18 at 23:54

Leonardo Alves Machado

2,747
10
38
53

answered Mar 22 '18 at 20:56

user9537183

1

ngModel 2-way data binding not working with Visual Studio 2017 Angular 2 Single Page Application Template

4 Answers4