この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
好物はインフラとフロントエンドのかじわらゆたかです。
AngularのFormでハマった編 第二弾です。
前回の記事は下記になります。
AngularJSのバリデーションにハマった件をまとめてみた。その1
スペースがエラーにならない。
以下のフォームは数字4桁のみを正常系とするフォームになります。
なお数字のみチェックはng-patternを用いてチェックを行っています。
このフォームに前後にスペースを入れた場合でも、バリデーションでは引っかかりません。
また、$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を有効にするか無効にするかは、アプリケーションの仕様によるところが大きいと思います。