No value accessor for '' angular2

Question

I'm working with Angular2 rc.4 and PrimeNg 1.0.0.beta.9, and i'm getting this error:

platform-browser.umd.js:1900 Error: No value accessor for ''
    at new BaseException (common.umd.js:836)
    at _throwError (common.umd.js:3516)
    at setUpControl (common.umd.js:3493)
    at NgModel.ngOnChanges (common.umd.js:4103)
    at DebugAppView._View_ItemComponent1.detectChangesInternal (ItemComponent.template.js:1266)
    at DebugAppView.AppView.detectChanges (core.umd.js:12143)
    at DebugAppView.detectChanges (core.umd.js:12247)
    at DebugAppView.AppView.detectContentChildrenChanges (core.umd.js:12161)
    at DebugAppView._View_ItemComponent0.detectChangesInternal (ItemComponent.template.js:688)
    at DebugAppView.AppView.detectChanges (core.umd.js:12143)

This happens with all the PrimeNG components that use [(ngComponent)], for example the p-dropdown directive:

<p-dropdown [options]="items" [(ngModel)]="item"></p-dropdown>

I've follewed the Angular2 tutorial and the PrimeNG showcase, all worked fine until now, that's the first problem I faced that I can't solve.

If I remove only the part

[(ngModel)]=... 

the error doesn't appear and the component is correctly displayed, even with my list of items.

In my component.ts file i've injected the directive like I've done with several others:

import {SelectItem, Dropdown} from 'primeng/primeng';
...
@Component({
...
directives:     [Dropdown],
})

My problem is similar to this one: ngmodele-no-value-accessor-for

but in my case the custom component is from a third part library (PrimeNG) and I've not control over it

Answer 1

The error thrown indicates that it is using the ngModel from the angular common.umd.js module which have been deprecated. It should be using ngModel in the new angular forms module instead. Try disabling the deprecated forms in your main.ts.

Example:

import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app';
import { provideForms, disableDeprecatedForms } from '@angular/forms';

bootstrap(App, [provideForms(),
          disableDeprecatedForms()])
  .catch(err => console.error(err));

Edit: Forgot to add... if you look at the PrimeNG dropdown component, you'll see that it is referencing the new angular forms. Github: dropdown.ts

Answer 2

My guess is p-dropdown doesn't support this [(ngModel)] binding, how's about go through their documentation to find out. Can you try

[(value)]="your variable"