The directive [(ngModel)]= not working anymore in rc5

Question

ngModel is throwing exceptions, this worked fine in rc4

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

These are the exceptions:

zone.js@0.6.12?main=browser:260 Uncaught EXCEPTION: Error in ./CommunityListComponent class CommunityListComponent - inline template:10:27 ORIGINAL EXCEPTION: No value accessor for form control with unspecified name ORIGINAL STACKTRACE: Error: No value accessor for form control with unspecified name

Answer 1

can also solve by importing FormsModule into your bootstrap module, then it will be available to 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

Now you need to set the name on input. For example;

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

And all directive must be set on *.module.ts.

Answer 3

Try like this-

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 is working for me in RC5.

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

Answer 4

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

1. Include FormsModule in your app.module.ts

2. Use name attribute in your html input tags like this:

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

That's all.

Answer 5

At the app.module.ts

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

Then at @NgModule(){imports:[FormsModule]} with other staff

Answer 6

You need to tell it explicitly that changes are being made. Please observe:

1. import {ChangeDetectorRef}
2. declare its object in constructor.
3. this.object.detectChanges(); in function where changes are being made

Answer 7

There's another simple substitute as follows:

item: string = "";

<input name= "item" (input)= "item=$event.target.value">
<h1>{{item}}<h1>

Answer 8

You can resolve it by adding formControlName like this <input [(ngModel)]="par.name" placeholder="name" formControlName="name"/>

Here I attach an image when I use [(ngModel)] in <input/> without formControlName

I hope It helps you...