The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

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

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

1:43
Two-way binding still exists in Angular 2 and `ngModel` makes it simple. The syntax is a combination of the [input] and (output) syntax to represent that the data is being pushed out and pulled in.
Watch this lesson now
Avatar
egghead.io

Two-way binding still exists in Angular 2 and ng-model makes it simple. The syntax is a combination of the [input] and (output) syntax to represent that the data is being pushed out and pulled in.

Avatar
Steven

As far as I can tell in the beta release the ng-submit becomes ngSubmit, and ng-model becomes ngModel, even in the template. It also seems to disallow - in reference names. Finally the form directives import looks like it's now
import
{FORM_DIRECTIVES} from 'angular2/common';

I imagine there are lots of these, but figured I'd mention in case anyone else was head scratching.

In reply to egghead.io
Avatar
Eugene

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

Avatar
james

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

In reply to Eugene
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?