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

1 inputイベントを使用する
- 1.1 私のベストプラクティス
- 1.2 アンチパターン
  - 1.2.1 その他のアンチパターン
2 サーバーでのチェックが必要な場合
- 2.1 サーバーにリクエストを行うサンプル

inputイベントを使用する

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

私のベストプラクティス

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

<input type="text" (input)="check($event.target.value)">
<div>{{msg}}</div>

1 2	<input type="text" (input)="check($event.target.value)"> <div>{{msg}}</div>

  msg : string;
// ------
  check(val:string): void {
    if (event.target.value(/^[a-zA-Z]+$/)) {
      this.msg = 'OK';
    } else {
      this.msg = 'NG';
    }
  }

msg : string;

// ------

check(val:string): void {

if (event.target.value(/^[a-zA-Z]+$/)) {

this.msg = 'OK';

} else {

this.msg = 'NG';

}

アンチパターン

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

<input type="text" [(ngModel)]="inputVal" (input)="check()">
<div>{{msg}}</div>

1 2	<input type="text" [(ngModel)]="inputVal" (input)="check()"> <div>{{msg}}</div>

  inputVal : string;
  msg : string;
// ------
  check(): void {  // !!! 発火されないパターンが存在する
    if (this.inputVal.match(/^[a-zA-Z]+$/)) {
      this.msg = 'OK';
    } else {
      this.msg = 'NG';
    }
  }

inputVal : string;

msg : string;

// ------

check(): void { // !!! 発火されないパターンが存在する

if (this.inputVal.match(/^[a-zA-Z]+$/)) {

this.msg = 'OK';

} else {

this.msg = 'NG';

}

その他のアンチパターン

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

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

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

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

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

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

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

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

  checkInterval: NodeJS.Timer;
  msg: string;
// -----
  serverCheck(val: string): void {
    // すでにチェック待ちの場合は停止させる。
    if (this.checkInterval) {
      clearTimeout(this.checkInterval);
      this.checkInterval = undefined;
    }
    // ローカルでできるチェックを行う。
    if (!val.match(/^[a-zA-Z]+$/)) {
      return;
    }

    this.checkInterval = setTimeout(() => {
      this.checkInterval = undefined;
      // サーバーチェックリクエスト処理
    }, 1500);
  }

checkInterval: NodeJS.Timer;

msg: string;

// -----

serverCheck(val: string): void {

// すでにチェック待ちの場合は停止させる。

if (this.checkInterval) {

clearTimeout(this.checkInterval);

this.checkInterval = undefined;

}

// ローカルでできるチェックを行う。

if (!val.match(/^[a-zA-Z]+$/)) {

return;

}

this.checkInterval = setTimeout(() => {

this.checkInterval = undefined;

// サーバーチェックリクエスト処理

}, 1500);

}