Angular 11 芯片防止用户输入错误值

Question

我想实现 angular 材料的“芯片组件”。我想使用 chip material with autocomplete 但我想在添加之前确保使用的值存在于给定列表中。

例如，在 link 中，前提是您只获得了水果列表。如何防止用户在列表中输入“具体”（这不是我们这里的水果列表的一部分？）

我不希望验证在“保存”按钮或其他东西中，我想避免从一开始就输入错误的值。

这是一个stackblitz from angular without the input verification

非常感谢！ 凯夫'.

Answer 1

在接收新添加的值的 add 函数上，检查列表，对于本例，“fruits”是否存在当前值。