title: angular2 rc.5 custom input, No value accessor for form control with unspecified name
body: <p>I have simple custom input component like this,</p>
  
  <pre class="lang-js prettyprint-override"><code>import {Component, Provider, forwardRef} from "@angular/core";
  import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
  
  const noop = () =&gt; {};
  
  const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() =&gt; CustomInputComponent),
    multi: true
  };
  
  @Component({
    selector: 'custom-input',
    template: `
  
            &lt;input class="form-control" 
                   [(ngModel)]="value" name="somename"
                   (blur)="onTouched()"&gt;
  
    `,
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
  })
  export class CustomInputComponent implements ControlValueAccessor{
  
    //The internal data model
    private _value: any = '';
  
    //Placeholders for the callbacks
    private _onTouchedCallback: () =&gt; void = noop;
  
    private _onChangeCallback: (_:any) =&gt; 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;
    }
  
  }
  </code></pre>
  
  <p>and I have app module like this,</p>
  
  <pre class="lang-js prettyprint-override"><code>/**
   * 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 {  
  }
  </code></pre>
  
  <p>and main </p>
  
  <pre class="lang-js prettyprint-override"><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule }              from './app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p>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'.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;custom-input name="firstName" [(ngModel)]="firstName"&gt;&lt;/custom-input&gt;
  </code></pre>
  
  <p>and the app.component looks like this </p>
  
  <pre class="lang-js prettyprint-override"><code>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;
  }
  </code></pre>