ngx-bootstrap typeahead with FormControl angular 2

Question

here is a simple problem I can't find a solution to. I have a typeahead directive in input which lets a user to choose a category ( category array example -> [{ id: 1as1d, name: 'some category'},...]

How to set the id value to the FormControl field (which will appear in the submitted form) and display the name on the input (which will be showed in on the input while user is choosing)? Is there a way to separate what will be in the sent form and what is being showed while using FormControl?

I could only find a way to display and set the same variable either only id or only name.

<input 
    formControlName="category"
    [formControl]="userForm.controls['category']"
    [typeahead]="categoriesObservable"
    (typeaheadLoading)="toggleLoadingCategories($event)"
    (typeaheadNoResults)="toggleNoCategoriesFound($event)"
    (typeaheadOnBlur)="categoryFieldSelected($event)"
    (typeaheadOnSelect)="categoryFieldSelected($event)"
    typeaheadOptionsLimit="7"
    typeaheadOptionField="name"
    placeholder="Choose a category"
    class="form-control"/>

Answer 1

What you want to do is use a template for the options.

Taken from the documentation at http://valor-software.com/ngx-bootstrap/#/typeahead :

<ng-template #customItemTemplate let-model="item" let-index="index">
   <h5>This is: {{model | json}} Index: {{ index }}</h5>
</ng-template>

<pre class="card card-block card-header">Model: {{selected | json}}</pre>
<input [(ngModel)]="selected"
   [typeahead]="states"
   [typeaheadItemTemplate]="customItemTemplate"
   class="form-control">

In this example the customItemTemplate is used to display the model and index but any property of the model can be used. On selection the whole object of your selection can be sent, then in the function it is sent to you can take the id out of the object and use it for anything you need.

Answer 2

You use template like in a prevous answer to choose how you want to show options in the dropdown and you use function categoryFieldSelected(v: any) to choose what happens when you select one of the options. This way the input field witll have the value of the id+name of the selected category, but the selectedCategoryCode will be the value you use when you submit the form.

private selectedCategoryCode: string = '';

categoryFieldSelected(v: any): void {
    this.selectedCategoryCode = v.item.id;
    this.form.get('category').setValue(v.item.id+' '+v.item.name);
}

Answer 3

This will sound crazy but stay with me.

Just use a hidden input for the submit form and in the event typeaheadOnSelect assign the id value to the hidden input.

In case of loading data (editing old data) just use the category id to get the text and assign the name value to the typeahead.

Don't forget to use control.updateValueAndValidity() on the hidden input in typeaheadOnSelect event.