Angular2/4にて、フォーム(input)へのキー入力＆入力内容(value)を検出する

Angular2/4にて、ユーザのキー入力を検出する

Angular2/4にて、ユーザがフォームへ入力をしたこと検出してみたいと思います。

さらに、ユーザがエンターキーを押したときに、今まで入力した内容を取得してみます。

ユーザのフォーム入力を検出

0. プロジェクトを立ち上げる

ng new get-keyup

1. templateファイルを以下のように修正

<!-- app.component.html -->
<input type="text" (keyup)="getKeyupEvent($event)">

inputタグに（keyup）というイベントを登録するのがポイントです。

2. AppComponentにInputを追記

/** app.component.ts */
export class AppComponent {
  /** ここから */
  getKeyupEvent(event)
  {
    console.log(event);
  }
  /** ここまで追記 */
}

イベントを受け取って、コンソール出力します。

結果

KeyboardEventというイベントが取得できました。

打ち込んだキーの種類・内容が取得できているようです。

さらに中を覗いてみると、かなりいろいろな情報が取得できているようでした。

jsで取得できるKeyboardEventと同じかな？

参考：https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent

フォームに入力された内容を、エンターキーを押したときに取得

0. templateファイルを以下のように修正

<!-- app.component.html -->
<input type="text" #input (keyup.enter)="getInputValue(input)">

inputタグに（keyup.enter）というイベントを登録すると、エンターキーが入力されたことを検知してくれます。

getInputValueには、templateの変数であるinputを定義して渡します。

1. AppComponentを修正

/** app.component.ts */
export class AppComponent {
  /** Inputの値を検出 */
  getInputValue(input)
  {
    console.log('エンターキーが押されました');
    console.log(input.value);
  }
  /** ここまで追記 */
}

イベントを受け取って、コンソール出力します。

簡単。

結果

こんな感じになりました。

Enterキーをきっかけにイベント発火させるのはよく使いそう。

Angular便利。