В моем приложении Angular используются сложные проверки, выполняемые на стороне сервера. По этой причине я настроил обновления и проверки только для событий blur:
this.form = new FormGroup(
{ ... },
{
updateOn: 'blur'
}
);
Он работает хорошо, за исключением полей, которые используют автозаполнение. Если автодополнение открыто и пользователь щелкает запись мышью, происходит неприятная последовательность событий:
- Запускается событие размытие
- Проверка выполняется с неполным старым значением и добавляет ошибку
- Выбранное значение автозаполнения помещается в поле
- Всплывающее окно автозаполнения закрывается, и поле снова получает фокус
Результат выглядит так, как показано ниже (упрощенный пример). Допустимое значение находится в текстовом поле, но оно помечено как ошибка, поскольку проверка выполнялась для старого значения.
Технически правильно, что проверка была запущена, потому что щелчок по всплывающему окну автозаполнения вызывает событие blur. Однако с точки зрения пользовательского интерфейса это ерунда. Проверка должна произойти, когда вы закончите с полем и перейдете к следующему полю.
Итак, как я могу предотвратить событие blur и раннюю проверку?
Я создал простой пример StackBlitz. Он использует аналогичную настройку, но выполняет проверку на стороне клиента (и проверяет, что текст начинается с «ABC»). Чтобы воспроизвести проблему, введите «34», а затем выберите «ABC34» во всплывающем окне автозаполнения с помощью мыши.