(change) vs (ngModelChange) в Angular: в чем разница и что выбрать?

Основное различие: когда срабатывают события

Главное отличие между (change) и (ngModelChange) — это момент их вызова. (change) — это нативное DOM-событие, которое срабатывает при потере фокуса элементом (blur), если значение изменилось. (ngModelChange) — это событие директивы ngModel, которое срабатывает при каждом изменении значения модели, то есть сразу после того, как пользователь ввел символ, выбрал пункт из списка и т.д.

Детальное объяснение на примере

Рассмотрим ваш пример. Когда вы печатаете в поле ввода:

• При каждом нажатии клавиши: срабатывает (ngModelChange). В $event передается текущее значение поля. this.userName уже обновлен, потому что [(ngModel)] — это синтаксический сахар, который включает в себя [ngModel] и (ngModelChange).
• Когда вы убираете фокус с поля: срабатывает (change). В этот момент this.userName содержит финальное значение после всех изменений.

Пример кода с пояснениями:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <input 
      [ngModel]="name" 
      (ngModelChange)="onNgModelChange($event)" 
      (change)="onChange()">
    <p>Значение: {{ name }}</p>
  `
})
export class ExampleComponent {
  name: string = '';

  onNgModelChange(newValue: string): void {
    console.log('ngModelChange:', newValue); // Выведет каждый символ
  }

  onChange(): void {
    console.log('change:', this.name); // Выведет только при потере фокуса
  }
}

Когда использовать каждое событие

• (ngModelChange) — используйте, когда нужно реагировать на каждое изменение в реальном времени. Например:
  • Автодополнение (autocomplete) поиска
  • Валидация "на лету" (показывать ошибку сразу, а не после потери фокуса)
  • Подсчет символов
• (change) — используйте, когда нужно срабатывать только после того, как пользователь закончил ввод. Например:
  • Отправка данных на сервер (чтобы не делать много запросов)
  • Финальная валидация перед сохранением
  • Обновление связанных полей только после завершения ввода

Важные нюансы

• Не используйте (ngModelChange) вместе с [(ngModel)] без необходимости. Если вы пишете [(ngModel)]="name" (ngModelChange)="onChange($event)", то вы фактически дублируете обновление модели. Лучше использовать [ngModel]="name" (ngModelChange)="onChange($event)" и вручную обновлять this.name = $event внутри обработчика, если это нужно.
• Типизация: $event в (ngModelChange) имеет тип, соответствующий типу модели. Для string это string, для number — number и т.д.
• Производительность: (ngModelChange) может вызывать много лишних срабатываний, если вы делаете тяжелые операции. В таких случаях лучше использовать (change) или добавить debounce (задержку) через RxJS.

Пример с debounce (оптимизация)

import { Component } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-search',
  template: `
    <input [ngModel]="searchTerm" (ngModelChange)="onSearchChange($event)">
  `
})
export class SearchComponent {
  searchTerm: string = '';
  private searchSubject = new Subject<string>();

  constructor() {
    this.searchSubject.pipe(
      debounceTime(300), // ждем 300 мс после последнего ввода
      distinctUntilChanged() // игнорируем, если значение не изменилось
    ).subscribe(term => {
      console.log('Отправляем запрос:', term);
      // здесь можно сделать HTTP-запрос
    });
  }

  onSearchChange(value: string): void {
    this.searchTerm = value;
    this.searchSubject.next(value);
  }
}

В итоге: (change) — для действий по завершению ввода, (ngModelChange) — для реакций в реальном времени. Выбирайте по задаче и не забывайте про оптимизацию!