How to use ng-bootstrap Typeahead component on a Reactive Form

Question

I'm trying to use the ng-bootstrap Typeahead component on a Reactive Form with Angular 2 and, after looking the example code on Typeahead's documentation I'm unable to get it to work.

Currently, I have something like:

<input type="text" aria-describedby="cityValid" class="form-control" id="inputCity" [formControl]="userForm.controls.city" [ngbTypeahead]="search">

With a search function almost identical as the example code, but it fails with the following stack trace

error_handler.js:53 TypeError: Cannot read property 'subscribe' of undefined
at NgbTypeahead._subscribeToUserInput (typeahead.js:158)
at NgbTypeahead.ngOnInit (typeahead.js:52)
at DebugAppView._View_UserFormComponent0.detectChangesInternal (UserFormComponent.ngfactory.js:1093)
at DebugAppView.AppView.detectChanges (view.js:271)
at DebugAppView.detectChanges (view.js:376)
at DebugAppView.AppView.detectViewChildrenChanges (view.js:297)
at DebugAppView._View_ExecutionFormComponent3.detectChangesInternal (ExecutionFormComponent.ngfactory.js:551)
at DebugAppView.AppView.detectChanges (view.js:271)
at DebugAppView.detectChanges (view.js:376)
at DebugAppView.AppView.detectContentChildrenChanges (view.js:289)

What am I doing wrong? It would be great to have a general guide about how to use ng-bootstrap component on Reactive Forms, since the example are based on template-based ones.

Thanks!

Answer 1

Nevermind, the problem was that I took the search function that appeared on the example and converted it to a normal function but without returning any value.

I had

searchCity (text$: Observable<string>) {
  text$
  .debounceTime(200)
  .distinctUntilChanged()
  .map(term => term.length < 2 ? []
    : cities.filter(v => new RegExp(term, 'gi').test(v)).splice(0, 10));
}

Adding a return statement before text$ fixed things.