2014/01/15
2014年要注目のJavaScriptフレームワーク「AngularJS」を使ってフォーム作ってみました
AngularJSは一昨年2012年にリリースされ、去年2013年に注目が集まり始めた、
Googleを中心に開発されているJavaScripフレームワークです。
今一番広く使われているJavaScripライブラリのjQueryとは、使い方が基本的に異なっています。
jQueryの場合は、JavaScriptを記述する際に、jQueryライブラリで用意された記述法を利用して記述を行いますが、
AngulerJSの場合は、HTMLを記述するときにAngularJSで決められたルールに則って属性等を指定し、
必要に応じてJavaScriptを記述し、モジュールのひも付けや、値の指定等を行います。
そのため、AngularJSを使った記述は、WordpressのようなCMSをつかって、
テンプレートの記述を行う感覚に近いです。
そのため、HTMLを見ただけでも、ある程度どのような動きをさせようとしているのかを読み取ることができるのが、AngularJSの特長の一つとなります。
今回は、このAngularJSを使い、
バリデーション付きの入力フォームを作ってみました。
↓こちらが作ってみたもの
作り方
1.「AngularJS」の読み込み
まずは、他のJavaScriptライブラリと同様に、JavaScriptファイルの読み込みを行います。
jQueryと同様、ファイルをダウンロードし、サーバにアップロードして使う方法と、
Google AJAX APIを使って読み込む方法があります。
|
1 2 3 4 5 6 7 | <!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title>Use Angular.js</title> <script src="js/angular.min.js"></script> </head> |
|
1 2 3 4 5 6 7 | <!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title>Use Angular.js</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script> </head> |
2.HTMLの記述
今回作ったフォームでは、私自身はJavaScriptの記述を一切行っておりません。
まず、必須項目の確認のみが必要な、名前の記述からご紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <form method="post" name="userInfo"> <table> <tr> <th>苗字：</th> <td> <input type="string" name="userLastName" ng-model="userLastName" placeholder="苗字を入力してください" required> <span class="error" ng-show="userInfo.userLastName.$error.required">必須</span> <span class="valid" ng-show="userInfo.userLastName.$valid">OK</span> </td> <th>名前：</th> <td> <input type="string" name="userFirstName" ng-model="userFirstName" placeholder="名前を入力してください" required> <span class="error" ng-show="userInfo.userFirstName.$error.required">必須</span> <span class="valid" ng-show="userInfo.userFirstName.$valid">OK</span> </td> </tr> ・ ・ ・ </table> </form> |
この記述の手順
- formタグにname属性を設定
- 苗字および名前を入力させるinputタグに、name属性とng-model属性を同じ値で設定（おそらく別の値でも可能ですが、混乱を避けるため）
- このinputタグに、入力前の呼びかけの文をplaceholder属性に設定
- このinputタグに必須であることを示すrequired属性を設定
- 入力がされていない時に表示させるエラーメッセージを囲ったspanタグにng-show属性で、以下を記述
userInfo.userLastName.$error.required （[formのname].[対象のinputのname].$error.requiredの形式） - 入力が行われたときに表示させるメッセージを囲ったspanタグにng-show属性で以下を記述
userInfo.userLastName.$valid （[formのname].[対象のinputのname].$valid）
これで、必須項目のバリデーションができます。
つづいて、E-Mailアドレスの記述です。E-mailでは、正規表現を使ったテキストパターンの確認を行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | ・ ・ <tr> <th>E-Mail：</th> <td colspan="3"> <input type="mail" name="mail" ng-model="mail" placeholder="アドレスを入力してください" ng-pattern="/^[a-zA-Z0-9!$&*.=^`|~#%'+\/?_{}-]+@([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,4}$/" required> <span class="error" ng-show="userInfo.mail.$error.required">必須</span> <span class="error" ng-show="userInfo.mail.$error.pattern">メールアドレスの形式が異なっています</span> <span class="valid" ng-show="userInfo.mail.$valid">OK</span> </td> </tr> ・ ・ |
必須項目の設定等は先ほどと同じで、正規表現を使ったテキストパターンの確認を以下の手順で行います。
- inputタグに ng-pattern属性で、正しいテキストパターンの正規表現を設定する。
- テキストパターンが違っていた時に表示させるエラーメッセージを囲ったspanタグのng-show属性で、以下を記述
userInfo.mail.$error.pattern （[formのname].[対象のinputのname].$error.patternの形式）
これでメールアドレスのテキストパターンのバリデーションができます。
つづいてパスワードの記述です。文字数が制限内にあるか確認します。
また、通常パスワードは伏せられていますが、
「パスワードを表示する」というチェックボックスにチェックを入れると、パスワードが表示されるようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | ・ ・ <tr> <th>パスワード：</th> <td colspan="3"> <input type="password" name="password" ng-show="!showPassword" ng-model="password" placeholder="8文字〜12文字" ng-minlength="8" ng-maxlength="12" required> <input type="text" name="plainPassword" ng-show="showPassword" ng-model="password" required> <span class="error" ng-show="userInfo.password.$error.required">必須</span> <span class="error" ng-show="userInfo.password.$error.minlength">8文字以上入力してください</span> <span class="error" ng-show="userInfo.password.$error.maxlength">12文字までです</span> <span class="valid" ng-show="userInfo.password.$valid">OK</span> <div><input type="checkbox" id="showPassword" ng-model="showPassword"><label class="comment" for="showPassword">パスワードを表示する</label></div> </td> </tr> ・ ・ |
手順は以下です。
- 対象のinputタグに、ng-show属性で”!showPassword”を設定（パスワードの記述を伏せます）
- ng-minlength属性で最小の文字数を、ng-maxlength属性で最大の文字数を設定します。
- 最小値以下しか入力されていないときに表示するエラーメッセージを囲っているspanタグにng-show属性で以下を設定userInfo.password.$error.minlength （[formのname].[対象のinputのname].$error.minlengthの形式）
- 最大値以上入力されているときに表示するエラーメッセージを囲っているspanタグにng-show属性で以下を設定userInfo.password.$error.maxlength （[formのname].[対象のinputのname].$error.maxlengthの形式）
- パスワードを表示するのチェックボックスのng-model属性で”showPassword”を設定
あと、入力された名前を表示することもできるようでしたので、その機能もつけてみました。
|
1 | <span ng-show="userInfo.userLastName.$valid">こんにちは<span class="bold">{{userLastName}}</span>さん。</span> |
苗字のinputで設定しているname属性の値を{{userLastName}}というかたちで記述することで、
inputに入力された値がリアルタイムでこちらに表示されるようになります。
最後に、form内の全てのフォームがOKになったとき以外は、登録ボタンが使えない状態にする記述をします。
|
1 | <input type="submit" value="登録" ng-disabled="userInfo.$invalid"> |
登録ボタンのinputタグにng-disabled属性で”userInfo.$inbalid”という記述をすることで、
フォーム内全てがOKになるまで、ボタンが使えなくなります。
AngularJSのファイルサイズはjQueryとおなじくらい（100KB前後）ですし、IE8などでも動くようですので、
必要に応じて使い分けるといいと思います。
参考サイト
人気上昇中のJavaScriptライブラリを調べてみた［ジャンル別に比較］
AngularJS 使って手軽でリッチな入力フォームを作ってみた
Author Profile
SHARE
