CODEWITHSUNDEEP
javascripthtmlangulardatalisthtml-datalist
physicsboy
physicsboy

Reputation: 6326

Displaying one value and submitting another through html datalist and *ngFor

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?

Upvotes: 1

Views: 314

Answers (1)

Kim Kern
Kim Kern

Reputation: 60357

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.

Upvotes: 1

Related Questions