title: Custom Form Input not binding to model
body: <p>I am trying to make a custom form input in Angular 4.  This is a simple example, but I cannot get the component to bind to the ngModel.  I can pass this component a default value from the parent controller, but when I change a value in this input, the UI registers the change, but the model in the controller is not showing the new value.  </p>
  
  <p>Here is my custom component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, Input, forwardRef, Output, EventEmitter, ElementRef, Renderer } from '@angular/core';
  import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl } from '@angular/forms';
  
  @Component({
      selector: 'input-test2',
      template:
          `
             &lt;input type="text" class="form-control" placeholder="Symbol"  [(ngModel)]="value" [maxlength]="5" &gt;     
          `,
      providers: [
          {
              provide: NG_VALUE_ACCESSOR,
              useExisting: forwardRef(() =&gt; InputTestComponent),
              multi: true
          },
      ]
  })
  export class InputTestComponent implements ControlValueAccessor {
      @Input('value') value = false;
      
      private propagateChange = (_: any) =&gt; { };
      private propagateTouch = (_: any) =&gt; { };
      
      writeValue(value: any): void {
          if (value) {
              this.value = value;
          }
      }
      
      registerOnChange(fn: (_: any) =&gt; void): void {
          this.propagateChange = fn;
      }
      registerOnTouched(fn: () =&gt; void): void {
          this.propagateTouch = fn;
      }
      
      private onChange(event : any) {
          this.propagateChange(this.value);
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And my usage of the component: 
   .. inside a form</p>
  
  <p><code>&lt;input-test2 id="coin" name="coin"  [(ngModel)]="manualEntry.coin"  #coin="ngModel" required (change)="x($event)" &gt; &lt;/input-test2&gt;</code></p>
  
  <p>Does anyone have a simple example of how to do this custom form input?  All examples I found are either complex and leave out functionality.  I just want a default input type="text" to start with and then I can add to this.  </p>