angular material 2 autocomplete howto make api call if the value length is more than something

Question

With angular material 2 autocomplete component how can I call API if the value length is more than something?

I have tried to check inside do() and also inside switchMap() but if the length of the entered value is less than 6 then it throws an error and then whatever I type something it doesn't respond to value-changes at all.

This is my code:

this.sites = this.searchForm.get('siteURLInput').valueChanges
    //.startWith(null)
    .debounceTime(1000)
    .distinctUntilChanged()
    .do(_ => {
        debugger;
      if ( this.searchForm.get('siteURLInput').value.length < 6)
        return;
    })
    // .switchMap(searchTerm => this.filterSites(searchTerm)) //switchMap automatically unsubscribes from any previous observable when a new event comes down the stream.
    .switchMap((searchTerm:string) => {
        debugger;
          if (searchTerm!=null && searchTerm.length > 5) {
            return this.filterSites(searchTerm);
          } 
          // else {
          //   return Observable.empty();
          // }
      }
    )
    .do(_ => 
      {
        console.log(this.sites); 
      })
    .catch(this.handleSiteServiceError);

filterSites(siteURL: string) {
  console.log('filterSites starting...' + siteURL);
  debugger;
  if(siteURL=='' || siteURL.length < 6)
    return;

  this.filteredSites = this.spWebApiService.getSitesByName(siteURL);
  console.log('filteredSites:' + this.filteredSites);
  return this.filteredSites;
}

Actually, the problem is whenever I get an error in autocomplete component, it doesn't response anymore.

And the exception is:

TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. at Object.subscribeToResult

This is because basically I return nothing and it expects an observable.

Answer 1

In your filteredSites function instead of returning nothing, I would return and empty observable there.

filterSites(siteURL: string) {

          if(siteURL=='' || siteURL.length < 6)
            return Observable.empty();
}