title: Angular Reactive Forms: Debounce only some specific Form Control
body: <p>I have a simple Search Component which contains a Reactive Form with 2 elements:</p>
  
  <ul>
  <li>Text Input (to search for arbitrary matching text)</li>
  <li>Checkbox (to include / exclude deleted results)</li>
  </ul>
  
  <p>So far I use <code>myFormGroup.valueChanges.subscribe(...)</code> to execute my search method.</p>
  
  <p>Now the problem is, that I want to debounce the text input. And at the same time <strong>not</strong> debounce the checkbox, so the search method is getting executed instantly when clicking the checkbox.</p>
  
  <p>Using <code>valueChanges.debounceTime(500)</code> will of course debounce the whole form. That's not what I want.</p>
  
  <p><strong>This is a stripped down example. The real form has some more inputs. Some should be debounced and some shouldn't.</strong></p>
  
  <p>Is there any easy way to get this done? Or do I have to subscribe to every form control separately?</p>
  
  <p>Would be nice to see how you did solve this.</p>
  
  <p>Thanks in advance.</p>
  
  <hr>
  
  <h2>EDIT: Code</h2>
  
  <pre><code>export class SearchComponent {
  
    myFormGroup: FormGroup;
  
    constructor(fb: FormBuilder) {
      this.myFormGroup = fb.group({
        textInput: '',
        checkbox: false
      });
    }
  
    ngOnInit() {
      this.myFormGroup.valueChanges.subscribe(val =&gt; {
        // debounce only the textInput,
        // and then execute search
      });
    }
  
  }
  </code></pre>