Error in Angular2 - No Value accessor ''

Question

I have recently upgraded angular-2 version from beta-17 to RC4.

I have seen the solution of the question, No value accessor for '' angular2.

My question is related to this question's answer.

I have updated my boot.ts with

import { bootstrap } from '@angular/platform-browser-dynamic';
import { provide, enableProdMode, PLATFORM_DIRECTIVES } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import {disableDeprecatedForms, provideForms} from '@angular/forms';

import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS} from './app.routes';

var injectables = [
    provideForms(),
    disableDeprecatedForms(),
    APP_ROUTER_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy }),
    HTTP_PROVIDERS,    
];

bootstrap(AppComponent, injectables)
    .then(null, console.error.bind(console));

I am still facing error for the value accessor, Error as follows,

platform-browser.umd.js:1900 Error: No value accessor for ''
    at new BaseException (forms.umd.js:599)
    at _throwError (forms.umd.js:1569)
    at setUpControl (forms.umd.js:1546)
    at NgModel._setUpStandalone (forms.umd.js:2349)
    at NgModel._setUpControl (forms.umd.js:2341)
    at NgModel.ngOnChanges (forms.umd.js:2300)
    at DebugAppView._View_ProjectDetailComponent1.detectChangesInternal (ProjectDetailComponent.template.js:1176)
    at DebugAppView.AppView.detectChanges (core.umd.js:12143)
    at DebugAppView.detectChanges (core.umd.js:12247)
    at DebugAppView.AppView.detectContentChildrenChanges (core.umd.js:12161)

From Error,I can deduce that its using angular/forms not angular/Common.

My Component Defination is as follows,

import {Component, Injector, OnInit, OnDestroy} from '@angular/core';
import {FORM_DIRECTIVES} from '@angular/common';
import {Subscription} from 'rxjs/Rx';
import {ProjectComponent} from '../../../project.component';

import { Calendar, InputText, InputTextarea, Checkbox, DataTable, Column, Dropdown } from 'primeng/primeng';


@Component({
    selector: 'projectDetail',
    directives: [Calendar, InputText, InputTextarea, Checkbox, DataTable, Column, Dropdown, FORM_DIRECTIVES],
    templateUrl: 'template/project/details/project'
})

My Component Template:

<input type="text" class="form-control" name="ProjectNo" [(ngModel)]="ProjectNo" />
        <input type="text" pInputText class="form-control" name="ProjectText" [(ngModel)]="Text" />
        <textarea pInputTextarea class="form-control" name="ProjectAdditionalText"></textarea>
        <input type="text" pInputText class="form-control" name="Phase" [(ngModel)]="Phase" />

        <p-calendar [readonlyInput]="true" monthNavigator="true" yearNavigator="true" placeholder="Pick a date" name="PlannedStartDate" [(ngModel)]="PlannedStartDate"></p-calendar>

        <p-checkbox name="BackwardPlanning" [(ngModel)]="BackwardPlanning"></p-checkbox>

Is it wrong to use ?

import {FORM_DIRECTIVES} from '@angular/common';

[Edit] -- After @Harry's suggestion, I have used

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

But it leads me to another error as follows

platform-browser.umd.js:1900 ORIGINAL EXCEPTION: No provider for NgModel!

platform-browser.umd.js:1900 Error: DI Exception
    at NoProviderError.BaseException [as constructor] (core.umd.js:4412)
    at NoProviderError.AbstractProviderError [as constructor] (core.umd.js:4529)
    at new NoProviderError (core.umd.js:4565)
    at ReflectiveInjector_._throwOrNull (core.umd.js:6461)
    at ReflectiveInjector_._getByKeyDefault (core.umd.js:6489)
    at ReflectiveInjector_._getByKey (core.umd.js:6452)
    at ReflectiveInjector_.get (core.umd.js:6261)
    at ElementInjector.get (core.umd.js:11873)
    at ElementInjector.get (core.umd.js:11873)
    at ReflectiveInjector_._getByKeyDefault (core.umd.js:6486)

Please help.

I think it is the case. You might as well change the form to using `REACTIVE_FORM_DIRECTIVES` from `@angular/forms` — Harry Ninh, Jul 26 '16 at 09:39
@HarryNinh: I have edited the question after your comment. You can see another error for NgModel Now. it is still unclear for me why suddenly now NgModel is not found. — Jeet, Jul 26 '16 at 10:02
I think you should revert back to FORM_DIRECTIVES. I think the problem is that you now need to add name attributes to all of your inputs that have [(ngModel)]. The new forms model requires it. — Filip Lauc, Jul 26 '16 at 10:04
@FilipLauc: Here the good things was initially itself i have name attribute in my all control. Even though i have the error. — Jeet, Jul 26 '16 at 10:28
@Jeet, I am sorry that I was not clear to the point that if you use REACTIVE_FORM_DIRECTIVES, you have to do lots of changes in template as well :) By the way, could you post your template here so people will have a clearer view of your issue? — Harry Ninh, Jul 26 '16 at 10:39

Jeet · Accepted Answer · 2016-07-28T14:06:39.840

2

After researching for all possible answers. I end up using

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

This has resolved my problem and now PrimeNG Component also works with NgModel binding.

Hope this helps anyone else who is having similar problem.

Regards, Jeet

edited Jul 28 '16 at 14:06

answered Jul 28 '16 at 06:43

Jeet

245
1
3
15

Error in Angular2 - No Value accessor ''

1 Answers1