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.

Answer 1

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