CODEWITHSUNDEEP
angularautocompleteng2-tag-input
user1814879
user1814879

Reputation: 984

Angular 2/4 Autocomplete define value

I tried to do an autocomplete with angular and used tag-input. The autocomplete works fine but before sending my form I want to define my display value and the id of the display value.

My JSON File :

 [
            {
                "active": true,
                "code": "IDV",
                "name": "Car destruct"
            },
            {
                "active": true,
                "code": "VCV",
                "name": "Vehicle road"
            }
]

Html :

<tag-input [(ngModel)]="folderCreate.sujet" name="sujet" 
                        [theme]="'bootstrap'" [placeholder]="'Ajouter un type'"
                        [onTextChangeDebounce]="500" 
                        [secondaryPlaceholder]="'Add un type'"
                        [onlyFromAutocomplete]="true"> 
                            <tag-input-dropdown [autocompleteObservable]="**requestAutocompleteItemsSujet**">
                                <ng-template let-item="item" let-index="index">
                                    {{item.display}}
                                </ng-template> 
                            </tag-input-dropdown> 
                    </tag-input>

My TS file :

public requestAutocompleteItemsSujet = (text: string): Observable<Response> => {
    return this.http
      .get('../../../assets/data/type.json')
      .map(data => data.json().map(item => item.name));
  }

So when I send my form I get :

0: Object 
    display : Car destruct
    value : Car destruct

but I want to get:

0: Object 
    display : Car destruct
    value : IDV

How can I resolve this?

Upvotes: 0

Views: 514

Answers (1)

Trincity
Trincity

Reputation: 149

I haven't run your plunkr, but looking at your code, try removing the second .map after the data.json().

Upvotes: 0

Related Questions