Как заставить автозаполнение материала Angular 7+ вводить буквы только из источника данных?

Question

Редактировать: Ниже приведены некоторые обходные пути (см. Ответы) для форм на основе шаблонов. (Я ищу решение для реактивных форм).

---

Как заставить автозаполнение Angular Material вводить буквы только из источника данных?

>> См. Все приложение здесь на stackblitz.com

«Адель» является начальным значением, и оно предоставляется массивом опций:

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

Автозаполнение работает правильно:

Однако следующее не должно быть возможным:

Пользователь может вводить только буквы, соответствующие записи в списке, т.е. первые буквы существующей записи.

Если пользователь пытается ввести буквы, которые не соответствуют ни одному из существующих значений, сообщение об ошибке должно информировать пользователя: «Введенное значение должно соответствовать записи в списке».

Есть ли возможность сделать это с автозаполнением Angular Material?

Answer 1

Я решил эту проблему с помощью специального валидатора. Если вы хотите увидеть это здесь, ..

В списке, но с учетом регистра:

Неверное значение

Все в порядке

Answer 2

Может быть более эффективно отлавливать ввод ключа во время ввода, добавляя обработчик нажатия клавиш на ввод.Затем посмотрите, какое значение будет, и сравните его со списком, «отменив» событие при необходимости.Грубо:

<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