Directive [(ngModel)] = no longer works in rc5

Question

ngModel throws exceptions, this works fine in rc4

<input [(ngModel)]="par.name" placeholder="name" /> 

These are exceptions:

zone.js@0.6.12? main = browser: 260 Unclear EXCLUSION: Error in. / CommunityListComponent class CommunityListComponent - built-in template: 10: 27 ORIGINAL EXCLUSION: No access to access forms with an unspecified name ORIGINAL STACKTRACE: Error: no access to data to manage a form with an undefined name

Answer 1

can also be solved by importing FormsModule into your bootstrap module, then it will be available for all components.

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from 'app/components/app'; @NgModule({ imports: [BrowserModule, FormsModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } 

Answer 2

Try it -

 import { Component, OnInit } from '@angular/core'; import { FORM_DIRECTIVES } from '@angular/common'; @Component({ selector: 'my-app', template: `<h1>My First Angular 2 App</h1> <input [(ngModel)]="employee.empName"> `, directives: [FORM_DIRECTIVES] }) export class AppComponent { employee = { empName: 'Sanket', email: '', phone: '', address:'' }; ngOnInit() { } } 

This works for me in RC5.

Link - https://angular.io/docs/ts/latest/api/common/index/NgModel-directive.html

Answer 3

Now you need to specify a name in the input. For example:

 <input [(ngModel)]="par.name" **name="name"** placeholder="name" /> 

And all directives should be set to * .module.ts.

Answer 4

Two things you need to do using two-way snapping syntax in forms in RC5.

• Include FormsModule in your app.module.ts

• Use the name attribute in the html input tags as follows:

  <input type="text" name="name" [(ngModel)]="par.name" />

What all.

Answer 5

You need to directly say that the changes are made. Note:

• import {ChangeDetectorRef}
• declare your object in the constructor.
• this.object.detectChanges(); in the function in which the changes occur.