Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/04/09 14:00

 本連載は、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の実行例
図1 ngFormの実行例

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

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

リスト2 コントローラでの利用例(controllers/form.jsの抜粋)
$scope.submit = function(){
    console.log($scope.frm.$valid,$scope.frm.$invalid);  // $scope.frmでアクセス可能です
};

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:AngularJSではじめるJavaScriptフレームワーク開発スタイル

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5