如何强制Angular 7+ Material Autocomplete输入仅由数据源提供的字母? [英] How can I force Angular 7+ Material Autocomplete to enter letters only provided by a data source?

问题描述

编辑:对于模板驱动的表单，下面有一些解决方法(请参见答案). (我正在寻找反应形式的解决方案.)

There are some workarounds as posted below (see answers) for template-driven forms. (I am looking for a solution for reactive forms).

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

How can I force Angular Material Autocomplete to enter letters only provided by a data source?

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

"Adel"是初始值，由options-array提供:

"Adel" is initial value and it is provided by the options-array:

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

自动完成功能正常运行:

The auto-complete works properly:

但是，以下内容不可能出现:

However, the following should not be possible:

用户只能输入与列表中条目对应的字母，即现有条目的首字母.

The user may only enter the letters corresponding to an entry in the list, i. the first letters of an existing entry.

如果用户尝试输入与任何现有值都不对应的字母，则错误消息应通知用户:输入的值必须与列表条目相对应."

If the user attempts to enter letters that do not correspond to any of the existing values, an error message should inform the user: "The entered value must correspond to a list entry".

是否可以使用Angular Material Autocomplete来做到这一点?

Is there possibility to do that with Angular Material Autocomplete?

推荐答案

我已经使用自定义验证程序解决了此问题. 如果要在此处查看，请参见.

I've solved this problem with a custom validator. If you want to see it, here,..

在列表中，但区分大小写:

错误值

一切都很好

这篇关于如何强制Angular 7+ Material Autocomplete输入仅由数据源提供的字母?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！