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