各コントロール要素の管理を行う ngModel
ngModelは、属性値に指定した変数をコントローラとの双方向バインディングが可能なディレクティブとして、これまでは多く説明してきました。
このディレクティブは、input/select/textareaディレクティブで必要なディレクティブであり、これらのディレクティブを通じて以下の機能も提供しています。
- required属性やnumber属性など要素に指定可能な型や条件などを利用した値のバリデーションチェック
- フォーカスの履歴、値のバリデーションチェックの有無などのCSSのクラス名でのスタータス管理
ngFormと同様にNgModelControllerのオブジェクトが通じてステータスを管理しています。このオブジェクトは、NgFormControllerオブジェクトのプロパティとしてアクセスでき、NgModelControllerが管理している主なステータスには表2（状態を示すプロパティ）があります。同時にCSSのクラス名も設定されますので、そのクラス名を利用して表示を変えることもでできます。
また、これ以外にも様々な機能がありますのでリファレンスを参照してください。
| 変数名 | 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の実行例
$errorプロパティではエラー原因が把握できます。入力バリデーションの指定はHTML5でのrequired属性やmin/max属性などが指定できることはもちろん、それ以外にもng-patternやng-maxlengthなどの属性をサンプルコードで使用してきたとおり、図2に示すように独自の拡張バリデーションが利用できます。
| 属性名 | 型 | 使用できるコントロールタイプ | 説明 |
|---|---|---|---|
| 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 | 入力可能文字のパターンを指定する |
また、各コントロールで指定できる属性の詳細はリファレンスを参照してください。
