如何强制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上的演示代码