Custom Control: ControlValueAccessor does not work
<p>I have a component which is wrapping a form control input field, for this i'm trying to implement the <code>ControlValueAccessor</code>.</p>

<p>But i don't get it working.</p>

<p>custom-input.component.ts:</p>

<pre><code>import { Component, Input } from '@angular/core';
import { ControlValueAccessor, FormGroup } from '@angular/forms';

const noop = () =&gt; {};

@Component({
  selector: 'custom-input',
  template: '&lt;input [(ngModel)]="value" (blur)="onBlur()"&gt;{{value}}'
})
export class CustomInputComponent implements ControlValueAccessor {
  private onTouchedCallback: () =&gt; void = noop;
  private onChangeCallback: (_: any) =&gt; void = noop;

  private _value: any = '';

  get value() {
    return this._value;
  }
  set value(v: any) {
    if (v !== this._value) {
      this._value = v;
      this.onChangeCallback(v);
    }
  }

  onBlur() {
    this.onTouchedCallback();
  }

  writeValue(value: any): void {
    this._value = value;
  }
  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }
}
</code></pre>

<p>And i use it like this:</p>

<pre><code>&lt;custom-input [(ngModel)]="foo"&gt;&lt;/custom-input&gt;
</code></pre>

<p>Exception:</p>

<pre><code>No value accessor for form control with unspecified name attribute
</code></pre>

<hr>

<p>Angular Verion: 2.1.2</p>

<p>Plunker: <a href="http://plnkr.co/edit/PgL81hTMdwJpPUs4wOOU?p=preview" rel="nofollow">http://plnkr.co/edit/PgL81hTMdwJpPUs4wOOU?p=preview</a></p>