title: FormControl.detectchanges - why use distinctUntilChanged?
body: <p>Reading <a href="https://stackoverflow.com/questions/36272036/how-to-use-rxjs-distinctuntilchanged">How to use RxJs distinctUntilChanged?</a> and <a href="https://xgrommx.github.io/rx-book/content/observable/observable_instance_methods/distinctuntilchanged.html" rel="noreferrer">this</a>, it seems that <code>distinctUntilChanged</code> alters the output stream to only provide <strong>distinct contiguous values</strong>.</p>
  
  <p>I take that to mean that if the same value arrives in immediate succession, you are essentially filtering the stream and only getting one occurrence of that repeated value.</p>
  
  <p>So if I write this:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.myFormControl.valueChanges
    .debounceTime(1000)
    .distinctUntilChanged()
    .subscribe(newValue =&gt; {
      console.log('debounced: ', newValue);
    });
  </code></pre>
  
  <p>I see no difference in output to this:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.myFormControl.valueChanges
    .debounceTime(1000)
    .subscribe(newValue =&gt; {
      console.log('debounced: ', newValue);
    });
  </code></pre>
  
  <p>I've seen a few places recommend using <code>distinctUntilChanged</code> when subscribing to <code>valueChanges</code> on form inputs — but don't really get why. </p>
  
  <p>It's an input, so if the user is typing it is always changing, right? The values will always be distinct, so you're just adding an extra operation to filter input for no reason.</p>
  
  <p>Or am I missing something here?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Using <code>distinctUntilChanged</code> as per my first code sample, I created a form input with the value <code>Mr Trump</code> and ensured it was saved in the model.</p>
  
  <p>I then clicked inside the control and pasted <code>Mr Trump</code>. Since the value is the same, I would have expected to not see anything logged — the control has the same value it had before, so surely the <code>distinctUntilChanged</code> should have ignored it?</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>After further looking into my test, this behaviour appears to be because I used an array of <code>AbstractControls</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.itemsControl = &lt;FormArray&gt;this.form.controls['items']; 
  ...
  this.itemsControl.controls[index].valueChanges...
  </code></pre>
  
  <p>So although a bit strange that it still fires when the value of the input is the same, I am guessing I need to hookup to <code>valueChanges</code> of the actual input inside this array item (a form group), and not the array item itself.</p>
  
  <p><strong>EDIT 3</strong></p>
  
  <p>So after changing the code in EDIT 2 to the following, pasting the same value that already exists into input control does not fire <code>valueChanges</code> (as expected). In EDIT 2 <code>valueChanges</code> was hooked to the entire <code>formGroup</code>, not the individual input control (in this case called <code>content</code>):</p>
  
  <pre class="lang-js prettyprint-override"><code>let fg = this.itemsControl.controls[index]; // get the formGroup
  fg['controls'].content.valueChanges
    .debounceTime(1000)
    .distinctUntilChanged()
    .subscribe(newValue =&gt; {...});
  </code></pre>