Angular11 chip prevent user from inputing wrong values

Question

I want to implement the "chips component" of angular materials. I wanted to use the chip material with autocomplete but i would like to make sure that the value used exists in a given list before adding it.

For example in the link provided you only got a list of fruits. How to prevent a user from entering "concrete" into the list (which is not a part of our fruit list here ?)

I don't want the verification to be in a "save" button or something, I want to avoid the input of wrong values from the beginning.

Here is a stackblitz from angular without the input verification

Many thanks ! Kev'.

Answer 1

On the add function, which receives the newly added value, check on the list, for this example the "fruits" whether the current value existed or not.