Sync Values from Inputs with Angular 2’s ngModel Two-Way Binding

Not sure if I missed it, but you have to import FormsModule for ngModel to work.

Hey Eugene, you didn't miss it. It's not in the video.

For anyone else reading this, here is what I did to get it to work: in my app.module.ts file, near the top, I added: import { FormsModule } from '@angular/forms';

and further down in the file, in the NgModule annotation, in the array value for imports, I added FormsModule.

The final file looks like this: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component'; import { SimpleFormComponent } from './simple-form/simple-form.component'; import { MailService } from './mail.service'

@NgModule({ declarations: [ AppComponent, SimpleFormComponent ], imports: [ BrowserModule, FormsModule ], providers: [ { provide: 'mail', useClass: MailService }, { provide: 'api', useValue: 'http://localhost:3000'} ], bootstrap: [AppComponent] }) export class AppModule { }

Can we get an update on what we should do now, it doesn't work at all:

@Component({ selector: 'app-simple-form', template: `<div> {{message}} <input #myInput type="text" [(ngModule)]="message"> <button (click)="onClick($event, myInput.value);">Click me</button>

It's updated in the code but not the video. Definitely need an update to the video here for adding to app.module.ts:

import { FormsModule } from '@angular/forms';

...and adding FormsModule to the imports array.

I added multiple imports in app.module.ts

import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms';

also add the new imports below in app.module.ts

@NgModule({ imports: [BrowserModule, FormsModule, CommonModule],

This video needs some updates...