title: Angular 5 | ReactiveForm with ControlValueAccessor | onChange is not triggered
body: <p>I have a custom ControlValueAccessor which simply appends a currency symbol on an input.</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'app-currency-input',
    templateUrl: './currency-input.component.html',
    styleUrls: ['./currency-input.component.scss'],
    providers: [
      CurrencyPipe,
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() =&gt; CurrencyInputComponent),
        multi: true
      }
    ]
  })
  export class CurrencyInputComponent implements ControlValueAccessor {
  
    @Input() class = '';
  
    currencyValue: string;
  
    onChange: (value: number) =&gt; void;
    onTouched: () =&gt; void;
  
    constructor(
      private currencyPipe: CurrencyPipe
    ) { }
  
    parseToNumber(currencyString: string) {
      this.onChange(this.currencyPipe.parse(currencyString));
    }
  
    transformToCurrencyString(value: number): string {
      return this.currencyPipe.transform(value);
    }
  
    writeValue(value: number): void {
      if (value !== undefined) {
        this.currencyValue = this.transformToCurrencyString(value);
      }
    }
  
    registerOnChange(fn: any): void {
      this.onChange = fn;
    }
  
    registerOnTouched(fn: any): void {
      this.onTouched = fn;
    }
  
  }
  </code></pre>
  
  <p>The <code>CurrencyPipe</code> just parses the string to number and transforms a number to a currency string (with localized decimal seperator and currency symbol).</p>
  
  <p><br>
  When I try to use ReactiveForms like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;app-currency-input
    name="amount"
    class="value-box"
    formControlName="amount"
    required
  &gt;&lt;/app-currency-input&gt;
  </code></pre>
  
  <p>... then <code>onChange()</code> is not triggered on manual input.</p>
  
  <p><br>
  I have a workaround, where I subscribe to the <code>valueChanges</code> of the control and then do a</p>
  
  <pre class="lang-js prettyprint-override"><code>control.patchValue(newValue, { emitModelToViewChange: true })
  </code></pre>
  
  <p>... which successfully triggers the <code>onChange</code> for the ControlValueAccessor. <em>(A <code>patchValue</code> without options would do the same, because <code>true</code> is the default value for this option. I just wanted to point out the culprit here.)</em></p>
  
  <p>But I would love to use an inbuilt solution which does not resolve in additional needed checks and at least two valueChanges.</p>
  
  <p><br></p>
  
  <hr>
  
  <p>A simplified Plunker to try it out: <a href="https://embed.plnkr.co/c4YMw87FiZMpN5Gr8w1f/" rel="nofollow noreferrer">https://embed.plnkr.co/c4YMw87FiZMpN5Gr8w1f/</a>
  See the commented out code in <code>src/app.ts</code>.</p>