title: ControlValueAccessor.writeValue() called multiple times when using FormControl.setValue()
body: <p>Consider following reactive form setup:</p>
  
  <p>Lets have custom <code>SimpleInputComponent</code> that implements <code>ControlValueAccessor</code> interface. Add it to the the app template wrapped with <code>ngIf</code> directive, so we can re-invoke the <code>SimpleInputComponent</code>'s lifecycle when the <code>ngIf</code> expression changes.</p>
  
  <p>As the <code>SimpleInputComponent</code> is bound to <code>FormControl</code> instance with <code>formControlName</code> directive, you can change it's value by calling <code>FormControl.setValue</code> method.</p>
  
  <p>I expect the <code>FormControl.setValue</code> to trigger <code>SimpleInputComponent.writeValue</code> exactly once. Unfortunately that is not true.</p>
  
  <p>The <code>FormControl.setValue</code> calls <code>SimpleInputComponent.writeValue</code> as many times as many times the <code>SimpleInputComponent</code>'s lifecycle is invoked.</p>
  
  <p>Now to simulate the problem you need at least 2 components:</p>
  
  <p>SimpleInputComponent:
  <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, forwardRef, Input } from '@angular/core';
  import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormControlName } from '@angular/forms';
  
  @Component({
    selector: 'simple-input-text',
    template: `
      &lt;input [name]="formControlName" type="text" 
        [(ngModel)]="value"
        (input)="onChange($event)"
        (blur)="onBlur()" /&gt;
    `,
    providers: [
      { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() =&gt; SimpleInputComponent), multi: true }
    ]
  })
  export class SimpleInputComponent implements ControlValueAccessor {
    private value: string;
  
    constructor() { }
  
    propagateChange: any = () =&gt; {};
    propagateTouch: any = () =&gt; {};
  
    onBlur() {
      this.propagateTouch();
    }
    onChange(event) {
      this.propagateChange(event.target.value);
    }
  
    writeValue(value: any): void {
      console.log('writeValue() called');
      this.value = value;
    }
    registerOnChange(fn: any): void {
      this.propagateChange = fn;
    }
    registerOnTouched(fn: () =&gt; void): void {
      this.propagateTouch = fn;
    }
    setDisabledState?(isDisabled: boolean): void {}
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>AppComponent:</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 } from '@angular/core';
  import { FormGroup, FormControl } from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;button (click)="hidden = !hidden"&gt;{{hidden ? 'show' : 'hide'}}&lt;/button&gt;
        &lt;button (click)="changeValue()"&gt;change value&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div [formGroup] = "form" *ngIf="!hidden"&gt;
        &lt;simple-input-text formControlName="test"&gt;&lt;/simple-input-text&gt;
      &lt;/div&gt;
    `
  })
  export class AppComponent  {
    hidden = false;
  
    form = new FormGroup({
      test: new FormControl('')
    });
  
    changeValue(): void {
      console.log('changeValue() called');
      this.form.get('test').setValue('another value');
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The <code>AppComponent</code> contains 2 buttons:</p>
  
  <ol>
  <li>show/hide - to re-invoke the <code>SimpleInputComponent</code>s lifecycle</li>
  <li>change value - to run <code>FormControl.setValue</code> updating <code>SimpleInputComponent</code> by implementing own <code>writeValue</code> method</li>
  </ol>
  
  <p>Simulation scenario:</p>
  
  <ul>
  <li>click "show/hide" button (2n) times</li>
  <li>open a console click the "change value" button</li>
  <li>check the console and see that writeValue is called (n + 1) times (1 is from initial lifecycle)</li>
  </ul>
  
  <p>Live sample is at <a href="https://stackblitz.com/edit/angular-bgp3kg" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-bgp3kg</a></p>
  
  <p>So the question is: Am i doing something wrong?</p>