Dispay text and not value HTML datalist

Asked Aug 30 '18 at 15:12

Active Aug 30 '18 at 15:12

Viewed 228 times

I use this code to make a dropdown with an input to search and list items from an array ..

  <input list="homebox_id" formControlName="homebox_id"/>
  <datalist id="homebox_id"
    [ngClass]="{invalid: invalidInputs}">
    <option *ngFor="let homebox of homeboxs" value="{{homebox.homebox_id}}">{{homebox.serial_number}}</option>
  </datalist>

all is good except this code does not display serial_number but it displays the value i want to send "homebox_id"...What can i do to display the text i want?

asked Aug 30 '18 at 15:12

Aldo Abazi

What display are you referring to? The `option` elements? – AmmoPT Aug 30 '18 at 15:15
yes...i want do display "homebox.serial_number", but it displays the value instead – Aldo Abazi Aug 30 '18 at 15:17
I dont get it. You want to display exactly "homebox.serial_number"? Instead of its value? Just use `homebox.serial_number`, not `{{homebox.serial_number}}` – AmmoPT Aug 30 '18 at 15:19
no no...i want to display the value that come with {{homebox.serial_number}}, but the code displays the value of {{homebox.homebox_id}}. – Aldo Abazi Aug 30 '18 at 15:21
Try `[value]="homebox.homebox_id"` instead of `value={{homebox.homebox_id}}` – AmmoPT Aug 30 '18 at 15:24
tried it already – Aldo Abazi Aug 30 '18 at 15:31
Can you try to provide a [stackblitz](https://stackblitz.com/edit/angular-mz3t5h)? – AmmoPT Aug 30 '18 at 15:34
https://stackoverflow.com/questions/29882361/show-datalist-labels-but-submit-the-actual-value this is my exact problem but the solution didnt work for me – Aldo Abazi Aug 30 '18 at 15:41

Dispay text and not value HTML datalist

0 Answers0