【Angular】ngModelChangeイベントとchangeイベントの比較
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
ngModelChangeイベントとchangeイベントの違いについてまとめていきます。
ngModelChangeイベントとchangeイベントの比較
ngModelChangeイベント
ngModelChangeイベントはngModelディレクティブの@Outputです。
つまり、ngModelディレクティブがないと使うことができませんし、$eventには値が変わったvalueのみが格納されます。
使い方
component.html
<input type="text" [(ngModel)]="name" (ngModelChange)="console.log($event)">
※consoleをテンプレートで使うには、コンポーネントでconsoleメソッドを変数に代入しておく必要があります
この状態でinput内のtextを変更すると、変更する度にngModelChangeイベントが発火します。
例えば、nameに「あいうえお」が代入されていた場合、「あいうえお」を「お」から「あ」の順番に削除していくと、下記のような挙動になります。
Console
あいうえ // 「お」削除
あいう // 「え」削除
あい // 「う」削除
あ // 「い」削除
// 「あ」削除
changeイベント
HTMLElement: change イベント - Web API | MDN
changeイベントは要素の値の変更が確定した時に発生します。
input要素を抽出したい時は「$event.target」、valueプロパティ値を抽出したい時は「$value.target.value」などを使用します。
使い方
component.html
<input type="text" [(ngModel)]="name" (change)="console.log($event.target, $event.target.value)">
※consoleをテンプレートで使うには、コンポーネントでconsoleメソッドを変数に代入しておく必要があります
今回はconsole.logの引数を二つにしています。
この状態でinput内のtextを変更すると、変更が確定した時にのみchangeイベントが発火します。
例えば、nameに「あいうえお」が代入されていた場合、「あいうえお」を「お」から「う」まで削除してEnterもしくはinput要素から離れると、下記のような挙動になります。
Console
<input type="text" ng-reflect-mode="あいう" class="ng-untouched ng-valid ng-dirty"> "あいう" // 「おう」削除後にEnterもしくはinput要素から離れる
比較
発火タイミング
ngModelChangeイベント
⇨ngModelが変更される度に発火
changeイベント
⇨要素の値の変更が確定した時に発火
$eventに格納されている値
ngModelChangeイベント
⇨変更されたvalueのプロパティ値
changeイベント
⇨発生したイベントに関わる様々な情報(プロパティ)やメソッド＝イベントオブジェクト
今後に向けて
もっとレベルの高い記事を書きたい。
参考
素晴らしい記事に感謝いたします。
HTMLElement: change イベント - Web API | MDN
javascript - (change) vs (ngModelChange) in angular - Stack Overflow
