How to bind autocomplete data from Ngx-bootstrap typeahead to input fields

Question

I have the following typeahead that returns data

<input [(ngModel)]="model" [class.is-invalid]="searchFailed" [inputFormatter]="inputFormatBandListValue"
                 [ngbTypeahead]="search" [resultFormatter]="resultFormatBandListValue" class="form-control"
                 id="typeahead-http"
                 name="Search" placeholder="Search" type="text" value="search"/>
          <!--              <small *ngIf="searching" class="form-text text-muted">searching...</small>-->
          <img *ngIf="searching" alt="Loading Icon" src="assets/img/user/loading.gif">
          <div>
            <p>{{model | json}}</p>
          </div>
<input  class="form-control" id="manufyear" name="manufyear" type="text">
<input  class="form-control" id="location" name="location" type="text">

in json format {"Vehicle Name": "TOYOTA PRADO","MANUFACTURED YEAR":"2010", "LOCATION":"TOKYO"}

How can i bind the other input fields such that when a user selects a vlue from the autocomplete input, the other fields are populated with data from that selection. I hope am clear guys.

Answer 1

i've tried your solution but it hasn't worked. However i found a solution. On my ts, i had model:any instead of model: any = []; so the data was not returning as array of objects. then on my html i bind using ngModel [(ngModel)]="model.Vehicle Name" So my code was <input [(ngModel)]="model.Vehicle Name" class="form-control" formControlName="vehiclename" name="vehiclename" type="text"/> and ts model: any = []; and it worked. Hope it helps someone

Answer 2

You are not using NGX-Bootstrap (you are using NG Bootstrap), they are completely different libraries.

You can solve your problem by using selectItem event which is available on the ngbTypeahead Directive

HTML:

<input [(ngModel)]="model" 
       [class.is-invalid]="searchFailed" 
       [inputFormatter]="inputFormatBandListValue"
       [ngbTypeahead]="search" 
       [resultFormatter]="resultFormatBandListValue" 
       class="form-control"
       id="typeahead-http"
       name="Search"
       placeholder="Search" 
       type="text"
       (selectItem)="onItemSelect($event)" <--------------- add this
       value="search" />
<img *ngIf="searching" alt="Loading Icon" src="assets/img/user/loading.gif">
<div>
    <p>{{model | json}}</p>
</div>
<input  class="form-control" id="manufyear" name="manufyear" type="text">
<input  class="form-control" id="location" name="location" type="text">

TS:

onItemSelect(event: NgbTypeaheadSelectItemEvent) {
    const selectedObj = event.item // this is the selected object from the typeahead

    // now you can set the other inputs values here...
}

Answer 3

I think you were searching for this :

<div class="form-group">
  <label for="ArtistName">Band Name:</label>
  <input id="ArtistName" type="text"
         name="ArtistName"
         class="form-control"                     
         [(ngModel)]="album.Artist.ArtistName"
         [ngbTypeahead]="search"                     
         [resultFormatter]="resultFormatBandListValue"
         [inputFormatter]="inputFormatBandListValue"  <==  THIS
         #instance="ngbTypeahead"                     
    />
</div>

In ts

  inputFormatBandListValue(value: any) {
    // do what ever you want
    // now you can set the other inputs values here...
    return value.yourAttribut; // this return what to show in imput
  }

It's use by default you don't need to have it in the HTML (if you don't want to change it)

Hope it helps even if i'm a bit late for the "fight"

Regards

Edit : The question is on inputFormatter but it might still help somebody. It seems that [resultFormatter] doesn't work. A way around is :

<input type="text" formControlName="item_id" (selectItem)="onSelectItem($event)"
               [ngbTypeahead]="search" [resultFormatter]="formatter"/>

  onSelectItem(event: NgbTypeaheadSelectItemEvent): void {
    event.preventDefault();
    this.dataForm.patchValue({item_id: event.item.id});
  }

source : https://github.com/ng-bootstrap/ng-bootstrap/issues/611#issuecomment-313939870

Answer 4

In my case i removed [inputFormatter]="inputFormatBandListValue" and i added onSelectItem for to set the right value , and its work very well

Example :

<div class="form-group">
  <label for="artistName">Band Name:</label>
  <input id="artistName" type="text"
         name="artistName"
         class="form-control"                     
         formControlName="artistName"
         [ngbTypeahead]="search"                     
         [resultFormatter]="resultFormatBandListValue"
        (selectItem)="onSelectItem($event)                   
    />
</div>


  onSelectItem(event: NgbTypeaheadSelectItemEvent): void {
    event.preventDefault();
    this.artistName.patchValue(event.item.id);
  }