SHOEISHA iD

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

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

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

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

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


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

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

 ngModelは、属性値に指定した変数をコントローラとの双方向バインディングが可能なディレクティブとして、これまでは多く説明してきました。

 このディレクティブは、input/select/textareaディレクティブで必要なディレクティブであり、これらのディレクティブを通じて以下の機能も提供しています。

  • required属性やnumber属性など要素に指定可能な型や条件などを利用した値のバリデーションチェック
  • フォーカスの履歴、値のバリデーションチェックの有無などのCSSのクラス名でのスタータス管理

 ngFormと同様にNgModelControllerのオブジェクトが通じてステータスを管理しています。このオブジェクトは、NgFormControllerオブジェクトのプロパティとしてアクセスでき、NgModelControllerが管理している主なステータスには表2(状態を示すプロパティ)があります。同時にCSSのクラス名も設定されますので、そのクラス名を利用して表示を変えることもでできます。

 また、これ以外にも様々な機能がありますのでリファレンスを参照してください。

表2 状態を示すプロパティ一覧
変数名 CSSクラス名 意味
$pristine ng-pristine 入力がまだされたことがない状態
$dirty ng-dirty 入力がされたことがある状態
$valid ng-valid/ng-valid-[key] 例) ng-valid-required 入力バリデーションチェックでエラーがない状態
$invalid ng-invalid/ng-invalid-[key] 例) ng-invalid-required 入力バリデーションでエラーがある状態
$touched ng-touched フォーカスが当たっとことがある状態
$untouched ng-untouched フォーカスが当たったことがない状態
$error - バリデーションエラーがある場合に。そのエラーの理由を保持するオブジェクト。(エラー理由の詳細は後述)

 リスト3はngModelの状態を表示するサンプルコードで図2がその実行時の例です。

リスト3 ngModelの使用例(ngmodel.htmlの抜粋)
<form name="frm">
    <input name="uid" placeholder="値を入力してください"
           ng-model="item"
           ng-pattern="/^[0-9A-Za-z]+$/"
           ng-maxlength="4"
           ng-minlength="2"
           ng-required="true"
            >
    <table>
        : 省略
        <tr>
            <td>{{frm.uid.$valid}}/{{frm.uid.$invalid}} </td>
            <td>{{frm.uid.$dirty}}</td>
            <td>{{frm.uid.$pristine}}</td>
            <td>{{frm.uid.$touched}} / {{frm.uid.$untouched}}</td>
        </tr>
        : 省略
        <tr>
            <td>{{!!frm.uid.$error.required}}</td>
            <td>{{!!frm.uid.$error.minlength}}</td>
            <td>{{!!frm.uid.$error.maxlength}}</td>
            <td>{{!!frm.uid.$error.pattern}}</td>
        </tr>
    </table>
</form>

 NgModelControllerのインスタンスにアクセスするにはname属性がFormControllerのインスタンス(例ではfrm)のプロパティ名になります。

図2 ngModelの実行例
図2 ngModelの実行例

 $errorプロパティではエラー原因が把握できます。入力バリデーションの指定はHTML5でのrequired属性やmin/max属性などが指定できることはもちろん、それ以外にもng-patternやng-maxlengthなどの属性をサンプルコードで使用してきたとおり、図2に示すように独自の拡張バリデーションが利用できます。

表3 主にAngularJSで利用できるおもな拡張属性
属性名 使用できるコントロールタイプ 説明
ng-required string input/textarea 入力の必須/非必須を指定します。ng-required="true"とした場合にはrequiredと同様ですが、AngularJS式も使えます。
ng-minlength number input[text/number等の文字入力可能なコントール]/textarea 最小の入力文字数を指定する
ng-maxlength number input[text/number等の文字入力可能なコントール]/textarea 最大の入力文字数を指定する
ng-pattern string input[text/number等の文字入力可能なコントール]/textarea 入力可能文字のパターンを指定する

 また、各コントロールで指定できる属性の詳細はリファレンスを参照してください。

次のページ
スタイルを扱うためのディレクティブ

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング