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

Question

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

---

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

>> See the whole app here at stackblitz.com

“Adel”为初始值，由options-array提供：

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

自动完成功能正常：

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

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

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

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

Answer 1

我已经使用自定义验证器解决了这个问题。 If you want to see it, here,..

在列表中但区分大小写：

错误值

一切正常

Answer 2

通过向输入添加 keydown 处理程序，在输入时捕获键条目可能更有效。然后查看该值将是什么并将其与列表进行比较，如有必要，“取消”该事件。粗略：

<input (keydown)="keydownHandler($event)" ...


keydownHandler(event: KeyboardEvent) {
  const character = event.key;
  if (character.length === 1) {

    let value = this.myForm.controls.myControl.value;
    if (typeof value === 'object') {
      value = value.name;
    }

    value = (value + character).toLowerCase();

    if (!this.options.some(option => option.name.toLowerCase().indexOf(value) === 0)) {
      event.preventDefault();
    }
  } 
}

这适用于任何形式。

Stackblitz

Answer 3

您也可以尝试以下方法，不需要检查整个列表中的元素。

Angular Material Autocomplete Component Force Selection: Complete Example

这是Stackblitz上的演示代码