ngModel: No value accessor for ''

Question

I\'m creating a custom element in Angular 2.0 (), and when I include the ngModel attribute on the component, I\'m immediately hit with the foll

Answer 1

@DenisKolodin's answer mentions setting the accessor using ngControl.valueAccessor = this;. However, some articles suggest registering the provider this way instead:

@Component({
  selector: '...',
  template: '...',
  providers: [
  {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MyComponent ),
    multi: true,
  }      
})
export class MyComponent implements ControlValueAccessor{ ...

This is how it's done in Angular's DefaultValueAccessor source

Answer 2

I got the same problem. I figured that I tried to two-way bind my variable to a <span> element and then get that value in an attribute:

<span [(ngModel)]="_hidden" [hidden]="_hidden" class="field-validation-error">Username is required.</span>

As you can see, there's no way for the view to modify the _hidden variable in the model. Fixing the binding to one-way worked:

<span (ngModel)="_hidden" [hidden]="_hidden" class="field-validation-error">Username is required.</span>

Notice the change from [(ngModel)] to (ngModel).

Answer 3

>=RC.5

@NgModule({
  imports: [BrowserModule, FormsModule, ReativeFormsModule],

FormsModule and/or ReativeFormsModule depending on whether you use template driven forms, model driven forms or both

See also

• https://angular.io/docs/ts/latest/guide/forms.html
• https://angular.io/docs/ts/latest/cookbook/dynamic-form.html
• http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html

Answer 4

I had a similar issue when I was creating a release task in gulp. I tracked it down to an error with the minified versions of the Angular2 code which is what you are using in your plunker. This Angular2 Issue on github is where I found my answer and here is Igor Minar's response to the Issue (Igor is a top contributor to the Angular2 project).

TL;DR; Use the .dev Angular2 library files until the Angular team fixes this issue.

Answer 5

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

Answer 6

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));