angular - 如何强制 Angular 7+ Material Autocomplete 输入仅由数据源提供的字母？

Question

编辑：对于模板驱动的表单，下面发布了一些解决方法（请参阅答案）。（我正在寻找反应形式的解决方案）。

---

如何强制 Angular Material Autocomplete 输入仅由数据源提供的字母？

>> 在 stackblitz.com 上查看整个应用程序

“Adel”是初始值，由选项数组提供：

options: User[] = [
    {name: 'George Michael'},
    {name: 'Aretha Franklin'},
    {name: 'Adel'},
    {name: 'Janet Jackson'},
  ];

自动完成工作正常：

但是，以下情况应该是不可能的：

用户只能输入与列表中的条目相对应的字母，即。现有条目的第一个字母。

如果用户尝试输入与任何现有值都不对应的字母，则会出现错误消息通知用户：“输入的值必须对应于列表条目”。

Angular Material Autocomplete 是否有可能做到这一点？

标签： angularautocompleteangular-material

Answer 1

我已经用自定义验证器解决了这个问题。如果你想看的话，在这里，..

在列表中但区分大小写：

错误的值

一切都好