Ngx-bootstrap: fix(typeahead): typeahead with initial object value displays [object Object] instead of default value

[Kekstas]

Hi,
I am having trouble to set initial input field value when input value is Object using TypeAhead.
I crated a plunk to demonstrate the issue: http://plnkr.co/edit/WSUJ49?p=preview

It is showing [object Object] because it is actually an object, but when TypeAhead getting object from [typeahead] it is able to set object to [(ngModel)] and display value described in [typeaheadOptionField]
I need to do same but on init from object that is set in [(ngModel)].

I could see that same solution was working with angular1.

Any solutions...?
Any comments/suggestions appreciated.

[Dinistro]

@Kekstas You are using a really old version of angular2 and ng2-bootstrap. Try to upgrade to rc.4 and ng2-bootstrap 1.0.24

[Kekstas]

Well... Updated to most latest version... Same issue....
http://plnkr.co/edit/WSUJ49?p=preview

[valorkin]

@Dinistro seems predefined state options just sets ngModel value as is

[Kekstas]

It sets Object to input( looks right), but in that case I can't use objects with TypeAhead when I need Initial value.... But somehow I need save reference Id of input text(that is stored in Objects).

[justasSav]

+1

[justasSav]

https://github.com/valor-software/ng2-bootstrap/blob/development/components/typeahead/typeahead.directive.ts#L242
Expects keyup to parse complex object? Eh?

[Dinistro]

@valorkin @Kekstas @justasSav Currently It's not possible to work with objects in the ngModel. You need to set the value of the `typeaheadOptionField``. You will only get this value, if you change the value.

[roni-frantchi]

Hi there.
@Kekstas @justasSav were any of you able to work around this?.. How?..

@Dinistro @valorkin is it planned yet to include a fix in any forthcoming releases?
Do you have a solution in mind?.. I might spend some time working on this

[Kekstas]

Just used autocomplete from jqueryui :\

[kernwig]

No work around then? It seems the point of having typeaheadOptionField, which is to let us work with objects, is killed by not being able to get the selected object back.

[Hainesy]

Are there any plans to address this?

[valorkin]

we are grooming issues list and fixing all the small things now
plus writing roadmap for ngx-bs v2
so it's in roadmap and will be added soon

[mickeypuri]

Is there any work around for this?

[mariusl-a]

+1 just bumped into this one.. :) Thanks!

[twosandy]

+1 - setting the default selected value would be a good standard feature to have

[twosandy]

FYI for those who are interested I found a bit of a work around until something more solid is available.

in the html I put a second hash tag on the element:
#instance="ngbTypeahead"
.......

then in the .ts file I declared a second @ViewChild variable:
@ViewChild('instance') instance: NgbTypeahead;
@ViewChild('itemSelect') input: ElementRef;

this then allowed me to set the initial value of the underlying tag within the code:
this.input.nativeElement.value = 'xxx';

[ravithb]

+1 This is absolutely required when we use this in a search page and we need to come back to the previous page with the search key populated.

[MuraliM]

We keep waiting for this fix. Unfortunately we cant use https://ng-bootstrap.github.io/#/components/typeahead/examples as it has some other problems like select on blur and bootstrap 4 only. Any good typeahead plugin which is stable and covers the basic functionality like initialization, etc?

[mbasleraecom]

definitely +1 on this. Strictly using array's of strings is extremely limiting.

[AndreaVitale]

+1, stuck on this :(

[theCrius]

+1 on this. The component is basically useless as it is.

Also, it was suggested again nearly 1 year ago: https://github.com/valor-software/ngx-bootstrap/issues/2335

[exhtml]

+1

[suparnavg]

+1...

[molerat619]

+1

[prizeGit]

+1 Using typeahead on a search form which need to be populated after the first initial search.

[TomasMasiulis]

+1

[davidsennekool]

+1 This is a key functionality. Does anybody have a workaround?

[Helen1987]

+1

[svetoldo4444ka]

@Kekstas
according to docs

ngModel should get a string. Why don't you pass to ngModel (like in your example ) [(ngModel)]="StatePredefined.name"

[vvolodin]

+1
My workaround for working with objects was not using typeaheadOptionField at all. I've created a class for my options and overridden the toString method:

export class ManagerOption {
    constructor(public ManagerId: string, public FriendlyManagerId: string) {}

    public toString = () => {
        return this.FriendlyManagerId || this.ManagerId;
    }
}

I've found out that when typeaheadOptionField is null, the directive will use toString to set a displayed value. So now I'm mapping my options to ManagerOption objects and my reactive form works great with typeahead.

[okayestdeveloper]

Here's basically how I worked around this problem with Angular 7 and NGX-Bootstrap 3.

HTML

<input
  [formControl]="myTypeahead"
  [typeahead]="filteredOpts"
  typeaheadOptionField="value"
  (typeaheadOnSelect)="select($event.item)"/>

TypeScript

interface Opt {
  value: string;
  key: string;
}

export class MyComp implements OnInit {
  myTypeahead = new FormControl();
  options: Opts[];
  filteredOpts: Opts[] = [];
  selectedOption: Opt;

  constructor() {}

  ngOnInit() {
    this.myTypeahead.valueChanges.pipe(startWith(''))
      .subscribe((value) => {
        this.filteredOpts = this._filter(value));
  }

  private _filter(value: string): Opt[] {
    return this.options
      .filter((opt: Opt) => opt.value.toLowerCase().includes(value.toLowerCase()));
  }

  select(opt: Opt) {
    this.selectedOption = opt;
  }
}

Based on the Angular Material Autocomplete custom filter example found here: https://material.angular.io/components/autocomplete/overview

My case was slightly more complicated in that I was loading options with an API call in ngOnInit, but that was no issue.

Also note that this is basically doing the work of the typeahead in _filter and is not the most efficient method. However it got me moving forward again.

[Pizzicato]

Quite surprised this hasn't been fixed yet... Please, add this functionality :pray:

[pedrorey21]

set the value when the form is opened or initialized with id and description
ngOnInit ()
this.model = {id: 2, description: 'apple'};