【Angular】即時入力チェック【input text】

inputイベントを使用する

即時文字入力チェックを行うパターン。(input) eventにより発火させる。

私のベルトプラクティス

input eventの引数は$event.target.valueとする。

アンチパターン

$event.target.valを使わずにngModelで双方向bindした値をチェックする方法も一見よさそうだが、全角文字入力→決定(Enter)時で文字が確定された時点でinput eventが発火されないため、未チェックになる可能性がある。

その他のアンチパターン

  • (change) event
    理由→inputダイアログがらフォーカスが外れた時に実行される
  • (key) event全般
    理由→マウスによるペーストには反応しない。

サーバーでのチェックが必要な場合

即時入力同様に(input) eventでサーバーに問い合わせるのは無駄なリクエストが頻発するため辞めておきたい。文字が入力され、特定秒後にサーバーへの問い合わせを発火するようにする。

サーバーにリクエストを行うサンプル

処理手順としては簡単に3(4?)つになる。

  • サーバーリクエストの停止
  • ローカルで値チェック
  • サーバーリクエストの発行準備(setTimeout)
  • サーバーリクエストの発行(setTimeout内の処理)

このサンプルではサーバーリクエストの発行準備(setTimeout)が行われ、1500ms内に値の変更が行われた場合setTimeoutを停止し再度サーバーリクエストの発行準備を行う。つまり最終入力から1500ms後にサーバーへの問い合わせが発火される

1500msは適当な時間で仕様により変更すればよい。

スポンサーリンク
レタリング(大)広告
レタリング(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レタリング(大)広告