【Angular】ngModelChangeを使って入力監視をしよう!

ANGULAR

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はngModelChangeの使い方について学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • ngModelの使い方がわかる
  • ngModelChangeの使い方がわかる
  • GitHubのコードがダウンロードできる

※PCにnpm、nodeがインストールされている前提で記述します。
 yarn等をお使いの方は読み替えてください。

環境がない人はcodesansbox等を使ってね!

作りたいもの

これが今回の完成形だよ!

実行環境

Angularのバージョンが古いと動かないことがあるよ!
うまく動かなければアップデートしてね!

ngModelChangeの使い方をマスターしよう!

ngModelChangeとはngModelChangeで指定した値が更新されるたびに発火するウォッチャです。
主にテキストの入力監視や、チェックボックスの変更監視等に使われます。

正式に言うとngModelディレクティブの@Outputプロパティだよ!

ngModelChangeを使用するための下準備

ngModelChangeを使用するには、以下の3つの準備を行う必要があります。

  • moduleファイルにFormsModuleのインポート
  • ngModelディレクティブの設定
  • ngModelChangeの設定

ngModelを使用する構文

<input [(ngModel)]="変数名">
これで双方向データバインディングが出来るよ!
ngModelについて詳しく知りたい人は↓を参考にしてね!

【Angular】ngModelを使おう!【双方向データバインディング】

ngModelChangeを使う構文

<input [(ngModel)]="変数名" (ngModelChange)="関数名($event)">
$eventには変数の新しい値が入るよ!

ちなみにchangeとの違いはイベントの変更部分のみが受け取れる点だよ、
HTMLのIDやクラス名を取得したい場合はchangeを使おう!

404 NOT FOUND – サメハック
Infomation for Engineer🦈

実際に作ってみよう!

初期設定

ng new my-app
cd my-app
ng serve -o

app.component.html

<textarea
  [(ngModel)]="myText"
  (ngModelChange)="onChangeText($event)"
></textarea>
myTextの値が更新されるたびonChangeText関数が呼ばれるよ!

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  myText = 'サメハックです!';

  /**
   * 入力欄が更新されるたびに呼び出される
   * eventとしてmyTextの値が渡される
   */
  onChangeText(event: string) {
    console.log(event);
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule, //ngModelを使うためのモジュール
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
これで同じものが出来上がるよ!

GitHubのサンプルコード

今回作ったものはGitHubにあげているので
使いたい人やうまく動かなかった方は是非ダウンロードしてみてください。

GitHub - same-hack/Angular-ngModelChange
Contribute to same-hack/Angular-ngModelChange development by creating an account on GitHub.

まとめ

  • ngModelChangeとはngModelChangeで指定した値が更新されるたびに発火するウォッチャ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました