Angular 2/4 Autocomplete define value

Question

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?

This link below will give you a Angular2 template in Plunker. You can add you code to recreate your problem, then save the plnkr and share its link in your question. https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5 — Nehal, Jun 20 '17 at 12:49
Ok coool ... I created It : https://plnkr.co/edit/ydZvLTPiYj0POtSLrWem?p=preview .. but my component is not show .. may be I must to add library tag-input and tag-input-dropdown .. How can I do it ? — user1814879, Jun 20 '17 at 12:55
On the right side of Plunker window, there's a book symbol, usually its the second icon from the top, use that to find CDNs of external libraries you need. — Nehal, Jun 20 '17 at 13:00
I trie the plnkr but I have a problem ... I want to add ng2-tag-input library but it is a folder with many dependencies, so can I add a folder in plnkr ? — user1814879, Jun 21 '17 at 06:58

score 0 · Answer 1 · answered Jun 20 '17 at 17:34

0

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

answered Jun 20 '17 at 17:34

Trincity

149
9

Ok, but when I removed the second map, I can't show the item of the autocomplete – user1814879 Jun 21 '17 at 06:56

Angular 2/4 Autocomplete define value

1 Answers1