1

I am creating an autocomplete text box using <datalist> with *ngFor functionality, however the code I am using is displaying both what I declare as the [value] and also what I am inputting between the <option> tags...

Here is the stackblitz

This is the view of what I get when the autocomplete is present:

enter image description here

From the code line:

enter image description here

I would have expected the autocomplete box to only display {{d.val}}, but submit {{d.name}} when my form is submitted.

Why is it displaying both {{d.val}} AND {{d.name}}, and is there a way in which I can display one and submit another?

physicsboy
  • 5,656
  • 17
  • 70
  • 119

1 Answers1

1

The datalist tag will by definition render the value attribute of each option in the select list and then you additionally displayed {{d.val}} as a label (aame as setting the label attribute). Also, see this answer.

datalist just behaves differently than select. It's not possible to have different display/submit values for it without writing additional javascript code.

Kim Kern
  • 54,283
  • 17
  • 197
  • 195
  • Yup, I agree. :-/ Maybe you can use one of the autocomplete widgets that are out there instead, e.g. https://stackblitz.com/angular/dyrkjjvvxoe?embed=1&file=app/autocomplete-overview-example.html – Kim Kern Feb 28 '19 at 12:06
  • Or alternatively, you do the mapping by name. The display values should be unique anyway?! – Kim Kern Feb 28 '19 at 12:08