AngularJSで、入力フォームを簡単にチェックできるディレクティブを使う

AngularJSで初めるJavaScriptフレームワーク開発スタイル 第7回

　本連載は、JavaScriptのMVCフレームワークである、AngularJSを使った開発の解説記事です。前回は、AngularJSでの基本的な表示に関わるディレクティブ機能を紹介しました。今回は双方向バインディング機能を実現するディレクティブを中心に紹介します。画面からの入力を行うので主にForm機能を使いますが、AngularJSでは独自機能で拡張されています。また、HTML5からのバリデーションを行うための機能とも連携しているために、より高度なことができるようになっています。

対象読者

• jQueryなどを使っている開発者
• JavaScriptを使った複数人でのプロジェクトに参加している方
• JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方

必要な環境

　この記事では、AngularJSを使用し、Chrome（39.0）、IE11、Firefox（35.0）、Safari（8.0.2）の環境にて確認を行っています。

入力フォームを扱うためのディレクティブ

　FormやInputタグなどフォームを扱うディレクティブでは、ユーザから入力される値を管理するために表示するだけのディレクティブとは異なり、便利な機能が沢山あります。それらの機能をうまく使うことで手間なく、また、問題がおきにくいシステムを構築できるようになっています。まずは、このフォームを扱うための機能を紹介します。

フォームの管理を扱うためのディレクティブ ngForm/ngSubmit

　ngFormディレクティブは、フォームコントロール要素（input要素等）を管理するためのディレクティブです。ngFormは<form>タグがそのまま利用できるために属性などで指定する必要はありません。フォームを送信する際には、ngSubmitもしくはngClickが使用されます。ngSubmitディレクティブは、フォームがサブミットされた時のイベント処理でonsubmitと同様のことができ、ngFormと共に利用されます。ngSubmitの代わりにngClickもよく利用されます。ただし、どちらも実際にサーバにサブミット（データ送信）が行われるわけではないので、ngSubmit/ngClickで指定したメソッド内で実装する必要があります。また、このディレクティブにはFormControllerというフォームの状態を管理するためのオブジェクトが同時に生成されます。このオブジェクトはフォーム全体のステータスを管理していて、表1（プロパティ一覧）に示すような状態の把握が可能です。

表1　プロパティ一覧

変数名	意味
$pristine	いずれのフォームコントール要素で入力、もしく変更がまだされていない状態
$dirty	いずれかのフォームコントロール要素で値の入力、もしくは変更がされた状態
$valid	すべてのフォームコントロール要素（入力）のバリデーションにエラーがない状態
$invalid	いずれかのフォームコントール要素（入力）のバリデーションエラーがある状態
$submitted	フォームがサブミットされたことがある状態
$error	バリデーションエラーがある場合に。そのエラーの理由を保持するオブジェクト。（エラー理由の詳細は後述）

　実際のフォームの状態を表示するコードのサンプルがリスト1です。FormControllerのインスタンスは、form要素のname属性の変数名でアクセス可能です。また、後述しますが、input要素のなどの各フォームコントロールの状態もFormControllerのインスタンスを利用してアクセス可能です。

リスト1　ngFormとngSubmitの使用例（form.htmlの抜粋）

<form name="frm"  ng-submit="submit()">
    <input name="name" placeholder="値を入力してください"
           ng-model="item"
           ng-pattern="/^[0-9A-Za-z]+$/"
           ng-maxlength="4"
           ng-minlength="2"
           ng-required="true"
            >
    <input type="submit" value="送信">
    <table>
        : 省略
        <tr>
            <td>{{frm.$valid}}/{{frm.$invalid}} </td>
            <td>{{frm.$dirty}}</td>
            <td>{{frm.$pristine}}</td>
            <td>{{frm.$submitted}}</td>
        </tr>
        : 省略
        <tr>
            <td>{{!!frm.$error.required}}</td>
            <td>{{!!frm.$error.minlength}}</td>
            <td>{{!!frm.$error.maxlength}}</td>
            <td>{{!!frm.$error.pattern}}</td>
        </tr>
    </table>
</form>

図1　ngFormの実行例

　FormControllerにコントローラからアクセスする場合には、リスト2のようにテンプレートで使用した変数名と同様に利用できます。

　変数名なども同様ですので、同じように扱うことが可能です。

リスト2　コントローラでの利用例（controllers/form.jsの抜粋）

$scope.submit = function(){
    console.log($scope.frm.$valid,$scope.frm.$invalid);  // $scope.frmでアクセス可能です
};