'Angular + Typescript: Accept Text Only If Value Inserted is Part of DataList

Apologies if this has been answered before, I was unable to find solution specific to my problem hence approaching you all genius minds. So coming right to the problem, this is what I'm facing,

So I have a list that holds approx 2000+ data entries, I am able to display it in a drop down without any problem but I want to provide the user with the option to type to narrowdown the list for the user to easily select from the list. What I've implemented, I've put it in an example on StackBlitz

What I'm trying to achieve is that user can insert text to narrowdown the drop down list (as currently working in the Code), but if user insert a value that is not in the list, it gives an error. This error could be anything from Highlighting the Text field RED, or Disabling the SUBMIT button with an error stating invalid input etc etc ...

Any help is greatly appreciated. Thank you and looking forward to hearing at some wonderful suggestions.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source