82

I have simple custom input component like this,

import {Component, Provider, forwardRef} from "@angular/core";
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";

const noop = () => {};

const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => CustomInputComponent),
  multi: true
};

@Component({
  selector: 'custom-input',
  template: `

          <input class="form-control" 
                 [(ngModel)]="value" name="somename"
                 (blur)="onTouched()">

  `,
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CustomInputComponent implements ControlValueAccessor{

  //The internal data model
  private _value: any = '';

  //Placeholders for the callbacks
  private _onTouchedCallback: () => void = noop;

  private _onChangeCallback: (_:any) => void = noop;

  //get accessor
  get value(): any { return this._value; };

  //set accessor including call the onchange callback
  set value(v: any) {
    if (v !== this._value) {
      this._value = v;
      this._onChangeCallback(v);
    }
  }

  //Set touched on blur
  onTouched(){
    this._onTouchedCallback();
  }

  //From ControlValueAccessor interface
  writeValue(value: any) {
    this._value = value;
  }

  //From ControlValueAccessor interface
  registerOnChange(fn: any) {
    this._onChangeCallback = fn;
  }

  //From ControlValueAccessor interface
  registerOnTouched(fn: any) {
    this._onTouchedCallback = fn;
  }

}

and I have app module like this,

/**
 * Created by amare on 8/15/16.
 */
import { NgModule }                     from '@angular/core';
import { BrowserModule }                from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule }          from '@angular/forms';
import { AppComponent }                 from './app/app.component';
import {CustomInputComponent} from "./app/shared/custom.input.component";
import {RouterModule} from "@angular/router";
@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule, FormsModule, RouterModule ],
  declarations: [ AppComponent, CustomInputComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {  
}

and main

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

and I have used my custom input in one of my components as shown below, but am getting 'No value accessor for form control with unspecified name attribute'.

<custom-input name="firstName" [(ngModel)]="firstName"></custom-input>

and the app.component looks like this

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';

  firstName: string;
}
5
  • I have the same issue with a custom directive that implements ControlValueAccessor. It was working in RC4 but gets same error as you for RC5. Hoping someone has a solution. Aug 16, 2016 at 23:50
  • 39
    Try adding ngDefaultControl to your control, like this: <custom-input name="firstName" [(ngModel)]="firstName" ngDefaultControl></custom-input>
    – danieleds
    Aug 17, 2016 at 15:08
  • @danieleds thanks so much it works like a charm, even though the angular team was not responding.
    – Amare
    Aug 18, 2016 at 6:35
  • 1
    Beware of any 3rd-party packages you may be using - if you import anything that is making use of the old FORM_DIRECTIVES, it will break your app! Case in point: github.com/valor-software/ng2-charts/issues/352
    – Pete
    Aug 19, 2016 at 11:18
  • For me adding ngDefaultControl before [(ngModel)]="...." worked Feb 17, 2017 at 15:11

5 Answers 5

74

adding ngDefaultControl to the custom input component in the host solved the issue, thanks @danieleds

3
  • 9
    This solution did not work for me. I have a name applied to my input and i also tried adding ngDefaultControl to the input and it did not work. Still gave me the same error. In RC5
    – prolink007
    Aug 24, 2016 at 2:25
  • 2
    Agree, I added name property in html and ngDefaultControl and I use formControl and it does not work. Oct 17, 2016 at 12:11
  • 1
    See a very good explanation on how ngDefaultControl works - stackoverflow.com/a/46465959/968003. Essentially, it adds default ControlValueAccessor, which acts as a bridge between the Angular forms API and a native element in the DOM.
    – Alex Klaus
    Oct 19, 2017 at 5:07
46

Add ngDefaultControl to the custom-input component. This adds two-way databinding, you shouldn't have to implement the value accessor methods unless you are doing something unique.

<custom-input name="firstName" [(ngModel)]="firstName" ngDefaultControl></custom-input>
13

Add ngDefaultControl to your input. eg

<inline-editor type="textarea" [(ngModel)]="editableTextArea" (onSave)="saveEditable($event)" value="valor" ngDefaultControl> </inline-editor> 

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

Finally directives: [FORM_DIRECTIVES]

This will work :) Thanks for the above comments

3
  • 2
    Please use backticks and other markdown commands to make your post more readable.
    – buhtz
    Aug 24, 2016 at 11:24
  • 4
    I am using RC6 and there isn't FORM_DIRECTIVES in @angular/common
    – Kosmonaft
    Sep 14, 2016 at 5:18
  • 6
    FORM DIRECTIVES ARE NO MORE WITH NG2 FINAL Oct 16, 2016 at 18:08
4

I was putting [(ngModel)] on my <option> tag instead of <select>

So yeah... that will cause this.

1
  • Yup.... I had the same error, putting the ngModel on a <mat-radio-button>, rather than the <mat-radio-group>. Grrrrrr.... Feb 19, 2019 at 11:57
0

As yet another scenario where this comes up, I had [(ngModel)] specified on a custom component which was recently rebuilt and simplified, and the new version of the component just had ngModel as a normal input variable with emits.

This was not enough - the input variable must be renamed to something besides ngModel, or the component must implement the ControlValueAccessor interface (see the docs for details). Once one or the other is complete, you will no longer get this error.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.