Когда мы используем директиву ngModel или реактивные формы в Angular, мы можем подписываться на событие valueChanges, которое срабатывает при изменении значения поля формы. Однако, по умолчанию это событие срабатывает и при потере фокуса у поля.
Существует несколько причин, почему valueChanges срабатывает при потере фокуса:
1. Поведение по умолчанию: Когда мы связываем поле формы с моделью данных через директиву ngModel или реактивные формы, Angular автоматически следит за изменениями значения поля. По умолчанию, Angular устанавливает событие blur для поля, которое срабатывает, когда пользователь переходит к другому элементу интерфейса или кликает на область вне поля. Когда происходит событие blur, Angular знает, что значение поля было изменено и рассылает событие valueChanges.
2. Целями Angular является предоставление наиболее гибкого и удобного инструмента для работы с формами. Одним из наиболее распространенных сценариев взаимодействия пользователя с формой является изменение значения поля и зафиксирование этого значения, когда пользователь уводит фокус с поля. Поэтому Angular по умолчанию считает, что изменение значения поля следует фиксировать при потере фокуса, что делает событие valueChanges полезным для отслеживания таких изменений.
Если вам необходимо изменить стандартное поведение и отключить срабатывание valueChanges при потере фокуса, вы можете использовать дополнительные настройки и методы Angular. Например, вы можете использовать опцию updateOn в реактивных формах или событие input в директиве ngModel, чтобы сделать так, чтобы valueChanges срабатывал только при изменении значения самим пользователем.
Вот пример использования опции updateOn для реактивной формы:
this.myForm = this.formBuilder.group({
myField: ['', { updateOn: 'submit' }]
});
В этом примере valueChanges будет срабатывать только при отправке формы, а не при потере фокуса у поля.
В заключение, valueChanges срабатывает при потере фокуса у поля из-за стандартного поведения Angular и наиболее распространенного сценария использования форм. Однако, если вам необходимо изменить это поведение, вы можете воспользоваться дополнительными настройками и методами Angular, чтобы контролировать срабатывание valueChanges.