SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

  • 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でアクセス可能です
};

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
各コントロール要素の管理を行う ngModel

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
AngularJSではじめるJavaScriptフレームワーク開発スタイル連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8569 2015/06/15 13:56

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング