title: Custom Control: ControlValueAccessor does not work
body: <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>