ngModel: No value accessor for ''

Question

I'm creating a custom element in Angular 2.0 (<my-select>), and when I include the ngModel attribute on the component, I'm immediately hit with the following error:

EXCEPTION: No value accessor for '' in [myModel in App@0:195] 

Here's a plunker: http://plnkr.co/edit/wlkPWcB92YZASCwCnmcw?p=preview

(Open console to view error)

If you simply comment out the following line from src/app.ts, the component will render appropriately:

'[ngModel]="myModel"' 

I've done the following:

1. Imported {FORM_DIRECTIVES} from 'angular2/common'
2. Included FORM_DIRECTIVES in the directives portion of the @Component
3. Initialized myModel

What am I missing here?

Answer 1

I take this error for 2 reasons:

1) Component has to attach itself as a value accessor, like:

@Component({   selector: 'ace-editor',   template: `<div class="ng2-ace-editor"></div>`, })  export class AceEditor implements OnInit, ControlValueAccessor {    constructor(private element: ElementRef, @Optional() ngControl: NgControl) {     if (ngControl) {       ngControl.valueAccessor = this;     }   } 

2) You haven't to mix deprecated and new forms. If you use a new API add to your main.ts:

import { bootstrap }    from '@angular/platform-browser-dynamic'; import { disableDeprecatedForms, provideForms } from '@angular/forms';  import { AppComponent } from './app.component';  bootstrap(AppComponent, [   disableDeprecatedForms(),   provideForms() ]) .catch((err: any) => console.error(err)); 

Answer 2

I think you should use something else than ngModel for the parameter of your my-select component... Because it's already used by Angular2.

I made a try with model and it seems better... I don't have the error anymore.

Edit

If you want to handle ngModel at the level of your my-select component, you could have a look at this link: https://github.com/angular/angular/issues/2543.

If you want to implement an ngModel-compliant component, you could have a look at the following links:

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/. See section: NgModel-compatible component
• Angular 2 custom form input

Hope it helps you, Thierry