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

问题描述

下面发布了一些针对模板驱动表单的变通方法(请参阅答案).(我正在寻找反应式形式的解决方案).

<小时>

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

但是，以下情况是不可能的:

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

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

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

解决方案

我已经使用自定义验证器解决了这个问题.

错误的值

一切正常

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

---

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

>> See the whole app here at stackblitz.com

"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".

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,..

In the list but case sensitive:

Wrong Value

Everything is OK

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