金井 健一

AngularJSの強力なフォームバリデーションを活用しよう

連載企画「AngularJS徹底解説」の第2回目は、Angularが備えている強力なフォームバリデーションについて解説します。

AngularJS の強力なフォームバリデーション

ご存知の通り、HTML5の仕様にもフォームバリデーションがあり、主要なモダンブラウザであれば既に実装されています。しかし、ブラウザに実装されたバリデーション機能は、まだ実践で使うには使い勝手がよいものとは言えません。もうしばらくは、プラグインやライブラリに頼ったり、または、自身で実装していく必要がありそうです。

今回からデモページを用意してみました。実際に動作していることを確認できます。レイアウト調整をしているため、本稿で掲載するサンプルコードとは多少異なること、ご了承ください。

各input要素のバリデーション

まず、Angularでのバリデーションは、双方向バインディングの特性を活かして、入力と同時にチェックを行うことができます。

例えば以下のように 記述することで、それぞれのテキストボックスに対して必須チェック・文字数チェックを行うことができます。

まずは、ng-requiredng-maxlength="4"となっている箇所がバリデーションの定義です。とても簡単に記述することができます。

ただ上記のままでは、チェックがエラーだったとしても、何の変化もおきません。そこで、次はバリデーションチェックエラーの場合にエラーメッセージを出してみます。

先のサンプルに少し書き足して、以下のようなコードにします。

このように、実際バリデーションを利用するにあたっては、form要素にname属性とnovalidate属性を、各input要素にはname属性とng-model属性を定義することがほぼ必須となります。忘れずに定義するようにしましょう。

form要素のnovalidate属性は、ブラウザに実装されているバリデーション機能をOFFにするためです。またform、input共にname属性がついていますが、こうすることでバリデーションチェックの結果を取得することができます。

実行すると以下のようにエラーメッセージが表示されます。

invalid

ng-showにそれぞれ渡している値がバリデーションチェックの結果です。それぞれの”form名”.”input名”.$errorというオブジェクトに保持されます。$errorの中にあるrequiredmaxlengthはチェックエラーのときに、trueになります。エラーではない場合はfalseとなるため、これを利用してエラーメッセージの表示切り替えを行うことができます。

上記のサンプルでは、必須チェックのみ、文字数チェックのみでしたが、複数のバリデーションを定義することも可能です。

このように、各エラーに対してをエラーメッセージを細かく設定することができます。逆に、エラーメッセージは1つだけ表示させたい場合もあります。以下のように、$invalidを利用すると実現することができます。$invalidは、複数定義したバリデーションのどれかひとつでもエラーであればtrueとなるためです。

取得可能なバリデーションチェックの結果を一部挙げると、

  • “form名”.”input名”.$error
    • 各バリデーションチェックエラーのプロパティを保持
  • “form名”.”input名”.$valid
    • 該当要素のバリデーションチェックが、エラーでないとき true
  • “form名”.”input名”.$invalid
    • 該当要素のバリデーションチェックが、エラーであるとき true
  • “form名”.”input名”.$dirty
    • 該当要素の値が初期値から変更があったとき true
  • “form名”.$valid
    • フォーム内の全要素に対して1つもバリデーションチェックエラーがないとき true
  • “form名”.$invalid
    • フォーム内の全要素に対して1つもバリデーションチェックエラーがあるとき true

となります。 この他にも input 要素が初期値かどうか、form が submit されたかどうかのフラグも取得可能です。

バリデーションによるクラスの付与

先述したとおり、Angular ではエラーであるかどうか等、true/falseのフラグを保持しています。これに加えて、各要素にクラスの付与も同時に行っています。 例えば、ng-requiredを定義すると、ng-invalid-requiredというクラスが要素に付与されます。Google Chrome Developer Tools等から確認することができます。

devtools

自動的にクラスが付与されるため、エラー時に「要素のボーダーを赤くする」など、スタイルを設定しておくこともできます。下記は、.ng-invalid(エラーの場合)のみ場合、初期表示時から赤く表示されてしまいます。

それを回避するために、.ng-dirty(初期値から変更があったかどうか)を併せて記述することで、ユーザが入力するまではエラーとして扱わないようにしています。

まとめ

今回はフォームのバリデーション機能について解説しました。自身であれこれ設定しなくても、かなり簡単に実装することがおわかりいただけたかと思います。

もちろん標準の機能では実現できないケースも出てくるでしょう。その際には、AngularUI の UI-Utils を利用することで複雑なバリデーションを実装することも可能です。

AngularUIのようにAngular用のプラグインも豊富に存在しているので、これらについても今後紹介していきたいと思います。

ng-japan 開催!

ngjapan 2015/3/21に日本で初めてとなる Angularのカンファレンス、ng-japanを開催します。 Angularの開発チームメンバーを招き、直接学ぶことができる場です(逐次通訳あります)。

そこで、CodeIQ さんから Angular について出題 させてもらいました。 ぜひ、解いてみてください。 codeiq

HTML5 Experts.jpでも、特集企画を組んでその内容をお伝えする予定です。

3/5~3/6に開催された本家 ng-conf では、Angular 2などのセッションが話題になっており、これからも注目すべきフレームワークの1つと言えるでしょう。

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Canvas Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js PhoneGap Polymer React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket