При разработке интерфейсов на Angular часто возникает потребность в отслеживании изменений в элементах формы. В Angular предусмотрены два события, которые позволяют это делать: (change) и (ngModelChange). Хотя на первый взгляд эти события выполняют одну и ту же функцию, между ними есть важные отличия.
Допустим, есть пример с текстовым вводом:
<input type="text" (change)="handleChange()" [(ngModel)]="name"/>
и
<input type="text" (ngModelChange)="handleChange()" [(ngModel)]="name"/>
В обоих примерах функция handleChange() вызывается при изменении текстового поля. Но когда именно она вызывается, зависит от используемого события.
Событие (change) возникает, когда пользователь изменяет значение элемента и затем убирает фокус из него, например, кликая в другое место страницы или нажимая клавишу Tab. Это стандартное поведение HTML и оно сохраняется в Angular.
Событие (ngModelChange), в свою очередь, возникает сразу при изменении значения элемента, не дожидаясь потери фокуса. Это поведение специфично для Angular и связано с его механизмом двустороннего связывания данных (two-way data binding).
По вопросу производительности, разница между (change) и (ngModelChange) не существенна и не должна влиять на выбор между ними. Выбор зависит от конкретной задачи и требуемого поведения интерфейса. Если необходимо реагировать на каждое изменение значения в реальном времени, следует использовать (ngModelChange). Если же достаточно реагировать на изменения только после того, как пользователь закончил ввод, то подойдет (change).
Добавить комментарий