title: Reactive Form's valueChanges event triggered even on selection of options from datalist
body: <p>When user types in the Input field am making an API call to fetch and populate the data in datalist for autocompletion(typeahead).</p>
  
  <pre><code>control.get('city').valueChanges.pipe(
    map((searchText) =&gt; searchText.trim().toLowerCase()),
    filter(text =&gt; text.length &gt; 2),
    debounceTime(10),
    distinctUntilChanged(),
    switchMap(searchText =&gt; this.locationService.getCitiesList(searchText))
  ).subscribe(response =&gt; {
      this.dataListOption = response.cities.map(city =&gt; city.name);
  })
  </code></pre>
  
  <p>The above code works fine and gets the options populated as expected, but when am selecting one of the populated options from the dropdown there is valueChange event trigger again which again makes another API call.</p>
  
  <p>How to prevent this? Is there any RXJS operator for this? I don't want to use ng-select or any other packages.</p>