angularJSのフォーム検証機能を理解する。

Level 2｜｜2016/07/27

先のサンプルでどんなものかを確認したら、実際のコードを見てみましょう。今回は検証機能の有効化や、「ng-submit」「ng-disabled」でどんな制御をしているか、またバリデーションによる自動クラス付加についても学びます。

目次 AngularJSの検証機能を有効化 AngularJSのイベント「ng-submit」属性 AngularJSの「ng-disabled」属性バリデーション情報バリデーションによるクラス自動付加入力されていない時は「ng-pristine」クラス入力された時は「ng-dirty」クラス値が間違っている時は「ng-invalid」クラス値が正しい時は「ng-valid」クラス

AngularJSの検証機能を有効化

フォームを設置した側からすると、ユーザーが独特の値を自由に入力してしまうこともあり、受取る側は結構厄介なものです。それを防ぐためにも、値の正規表現検証やらエラーメッセージやらは、今はフォームを設置するならデフォルトになっていて、HTML5の検証機能もまぁまぁ使えるようになりました。
でも、HTML5で厄介なのは、ブラウザに非対応のケースが多々あることと、入力後に検証となるためスマホでの入力は結構イライラします。
HTML5に比べ、AngularJSの検証機能は、ブラウザは関係なくJS同様にカスタマイズができるので、自由に設定できます。また、双方向バインディングなので、リアルタイムの検証も可能になり、スマホでの入力もアクションを少なくすることができます。
先に言ったように、HTML5でフォームを使う場合、自動的に検証機能が有効になります。すると、AngularJSの検証機能とHTML5の検証機能がバッティングしてしまうので、HTML5を無効にする必要があります。

実際にサンプルを触ってみたい方はこちら


<form name="myForm" novalidate>

formタグの「novalidate」は、HTML5から追加された機能で、検証機能を無効にします。これを設置すれば、AngularJSの検証機能が有効になります。HTML5の検証機能が及ばない場合は設置する必要はありませんが、設置しておけば間違いないです。

AngularJSのイベント「ng-submit」属性


<form name="myForm" ng-submit="onsubmit()" novalidate>

AngularJSのイベントディレクティブの一つに「ng-submit」属性があります。
「ng-submit」を使うと、AngularJSのバリデーション機能が有効になり、入力が完了しないと送信ボタンを使えない状態にすることができます。

formタグには、「name（フォーム名）」と「ng-submit（指示）」を設置しておきます。

AngularJSの「ng-disabled」属性


<form name="myForm" ng-submit="onsubmit()" novalidate> 

～ 中略 ～

<input type="submit" value="入力内容をコンソールでチェック"　ng-disabled="myForm.$invalid" />
<input type="reset" value="入力内容をリセット" ng-disabled="myForm.$pristine" />

formタグに「name」と「ng-submit」を設置したら、今度は送信ボタンに「ng-disabled」属性を付加します。

「ng-disabled」属性は、ユーザーが入力した値を検証して、全部OKなら送信ボタンを有効にし、一つでもNGなら送信ボタンを無効にする役割です。値を見ると、先に設定した「name="myForm"」（フォーム名）と「$invalid」が入っています。
「$invalid」は、サンプルだとmyFormの値が誤っているかどうかを検証します。
一つでも間違っていたらtureが返され、ボタンが無効に、全部OKならfalseが返され、ボタンが有効になります。
リセットボタンを見てみましょう。今度は「$pristine」と記述しています。入力されたらtureが返されリセットボタンが有効になり、クリックすれば、入力値がリセットされます。

バリデーション情報

「$invalid」「$pristine」以外にも情報を取得できるバリデーションがあります。

プロパティ名	内容	true	false
$invalid	値が誤っているかどうか	値が誤っている	値が誤っていない
$valid	値が正しいかどうか	値が正しい	値が正しくない
$error	任意に指示でエラーか判断	-	-
$pristine	値が入力されていない	入力されていない	入力されている＝ng-dirty
$dirty	値が入力されている	入力されている	入力されていない＝ng-pristine

バリデーションによるクラス自動付加

AngularJSのフォームでは、trueとfalseの情報を保持して、更にフォームの状態に応じて、自動的にクラスが付加されます。

付加されるクラスは、以下の通りです。
●.ng-pristine
●.ng-dirty
●.ng-valid
●.ng-invalid
付加された状態は、ディベロッパーツールなどで確認できます。

前回紹介したAngularJSのフォームコントロールで紹介したサンプルを参考に、クラスが付加された状態を確認していきましょう。
AngularJSのフォームコントロール

入力されていない時は「ng-pristine」クラス

「ng-pristine」クラスが付加されるのは、「$pristine」=値が入力されていない状態を示しています。サンプルを表示すると背景色が水色になっていますが、これはCSSで「ng-pristine」に背景色「ivory」を設定しているので、「ng-pristine」が有効の時のみ、背景色「ivory」が適用されます。
また、サンプルのリセットボタンが無効になっていることも確認できます。


.ng-pristine {background: ivory;}

入力された時は「ng-dirty」クラス

「ng-dirty」クラスが付加されるのは、「$dirty」=値が入力された状態を示しています。「ng-pristine」と逆です。サンプルのテキストボックスに何か値を入力してみてください。すると、水色だった背景色が、ラベンダー色に変わるのを確認できます。これは、「ng-pristine」だったけどアクションがあったので「ng-dirty」に変更したことをを意味しています。CSSで「ng-dirty」に、背景色「lavenderblush」を設定しているので、「ng-dirty」が有効の時のみ、背景色「lavenderblush」が適用されます。
また、値が入力されたので、サンプルのリセットボタンが有効になっていることも確認できます。


.ng-pristine {background: ivory;}

値が間違っている時は「ng-invalid」クラス

「ng-invalid」クラスが付加されるのは、「$invalid」=値が間違えている状態を示しています。サンプルのフォーム項目名の文字色を見てください。デフォルトはブラックに設定していますが、「ng-invalid」クラスが付加されているので、セピアに変更されています。
どれか一つでも正しく入力されていない場合を示しています。
また、サンプルの送信ボタンが無効になっていることも確認できます。


.ng-invalid {color: sienna;}

値が正しい時は「ng-valid」クラス

「ng-valid」クラスが付加されるのは、「$valid」=値が正しい状態を示しています。サンプルのフォーム項目「パスワード」に、たとえば「123456」と入力してください。
「12345」までは文字色がセピアですが、「123456」まで入力すると文字色がグリーンに変わります。
セピアの状態は「ng-invalid」が付加され、値が間違っていることを意味し、グリーンの状態は、「ng-valid」が付加され、値が正しいことを意味しています。
すべての値が正しい状態になれば、項目名のセピア色もグリーンに変わります。ちょっと入力が面倒ですが、時間がある方はすべての項目を入力してみてください。
また、すべての値が正しいので、サンプルの送信ボタンが有効になっていることも確認できます。