Angularでフォーム要素の値変更を検知する: (change) vs (ngModelChange) の違い

Angularにおける(change)と(ngModelChange)の違い

それぞれのイベント発生タイミング

(change)は、ユーザーがフォーム要素からフォーカスを外したタイミングで発生します。一方、(ngModelChange)は、ユーザーが入力や選択などによってフォーム要素の値が変更されたタイミングで発生します。

イベント発生時のモデル値

(change)イベント発生時のモデル値は、ユーザーがフォーカスを外れた時点の値です。一方、(ngModelChange)イベント発生時のモデル値は、変更後の最新値です。

使い分け

例

• フォーム入力内容に基づいて、他の要素を無効化/有効化したい場合: (change)
• ユーザーが入力する度に、API呼び出しを実行して候補を表示したい場合: (ngModelChange)

補足

• (change)はHTMLの標準イベントであるため、Angular以外のフレームワークでも使用できます。
• (ngModelChange)はAngular固有のイベントです。

<input type="text" [(ngModel)]="name" (change)="onChange()" (ngModelChange)="onModelChange()">

<p>Name: {{ name }}</p>
<p>Change event fired: {{ changeFired }}</p>
<p>Model change event fired: {{ modelChangeFired }}</p>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  name = '';
  changeFired = false;
  modelChangeFired = false;

  onChange() {
    this.changeFired = true;
    console.log('Change event fired');
  }

  onModelChange() {
    this.modelChangeFired = true;
    console.log('Model change event fired');
  }
}

動作説明

1. ユーザーがテキストボックスに入力すると、(ngModelChange)イベントが繰り返し発生し、モデル値が更新されます。
2. ユーザーがテキストボックスからフォーカスを外すと、(change)イベントが発生します。

出力例

Name: John Doe
Change event fired: false
Model change event fired: true

このサンプルコードを参考に、(change)と(ngModelChange)それぞれの挙動を確認し、目的に合った使い分けを理解してください。

(change)と(ngModelChange)以外の方法

ngSubmit

フォーム全体が送信された時に発生するイベントです。フォーム全体の値をまとめて処理したい場合に有効です。

<form (ngSubmit)="onSubmit()">
  <input type="text" name="name" [(ngModel)]="name">
  <button type="submit">送信</button>
</form>

Template Syntax

テンプレート構文を使用して、フォーム要素の値を直接参照することもできます。

<p>Name: {{ name }}</p>

<input type="text" name="name" [(ngModel)]="name">

<button type="button" (click)="name = 'John Doe'">名前をJohn Doeに変更</button>

RxJSを使用すると、フォーム要素の値変更をストリームとして観察できます。

import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  name = '';

  name$: Observable<string> = fromEvent(this.nameInput.nativeElement, 'input').pipe(
    map((event: Event) => (event.target as HTMLInputElement).value),
  );

  constructor(private readonly elementRef: ElementRef) {}

  ngOnInit() {
    this.name$.subscribe((name) => {
      console.log('Name changed:', name);
    });
  }
}

これらの方法に加えて、特定の状況に合わせたライブラリやフレームワークを使用することもできます。

X