AngularJSのバリデーションにハマった件をまとめてみた。その2

はじめに

好物はインフラとフロントエンドのかじわらゆたかです。

AngularのFormでハマった編 第二弾です。

前回の記事は下記になります。

AngularJSのバリデーションにハマった件をまとめてみた。その1

スペースがエラーにならない。

以下のフォームは数字４桁のみを正常系とするフォームになります。

なお数字のみチェックはng-patternを用いてチェックを行っています。

ng-trim Check Sample

このフォームに前後にスペースを入れた場合でも、バリデーションでは引っかかりません。

また、$viewValue側にもスペースが取り除かれた結果となっていることがわかります。

なお、前後ではなく間に入れた場合はエラーとなります。

現状説明＆解決策

これはAngularのinput要素内において、ng-trimの機能が働いているため起こっている現象となります。

この機能はデフォルトで有効になっています。

今回のケースのように特定の文字以外は受け付けないといったバリデーションを作る際には、
明示的にng-trimを無効にしておく必要があります。

<input 
    name="id_2"
    ng-model="id_2" 
    type="text" 
    class="form-control" 
    id="id_2" 
    placeholder="ID"
    ng-maxlength="4"
    ng-minlength="4" 
    ng-pattern="/^[0-9]*$/"
    ng-trim="false"/>

明示的に無効にすることで、バリデーションでエラーとなっていることが確認できます。

最後に

ng-trim="true"が有効に機能するケースとしては、
スペースのみの入力は入力とはみなさないといったケースがあります。

そのためng-trimを有効にするか無効にするかは、アプリケーションの仕様によるところが大きいと思います。

参考サイト

AngularJS: API: input