１）フォーム全体とその子要素の状態
　
・$pristine, $dirty, $valid ,$invalidの属性でフォームの状態を管理。
　
・フォーム全体の状態を取得するには、”フォーム名”.上記属性名、その子要素の場合は、”フォーム名”.”子要素の名前”.上記属性名でアクセス。
　
・フォーム全体の状態をこの属性を使って検知し、正常な状態では無い場合はボタン押下を無効にするなどの用途に使用される。
　
・フォーム内の入力項目の入力チェックエラーをこの属性を使って検知し、色を変えたりエラーメッセージを表示するなどの用途に使用される。
　
・以下、フォーム全体の状態について示します。その子要素もほぼ同様の意味になります。
　
①formName.$pristine
ブラウザで表示されてからまだユーザーによって一度もアクセスされていない状態。
　
②formName.$dirty
一度でもユーザーがアクセスするとng-pristineが削除され、ng-dirtyの状態になる。テキストボックス内をクリアしてもng-dirtyの状態は変わらない。
　
③formName.$valid
フォーム内のすべての入力要素が正常に入力されるとtrue。
　
④formName.$invalid
フォーム内の入力要素のうち少なくても一つが正常に入力されていなければtrue。
　
⑤formName.$error
フォーム内の入力要素のすべてのinvalid状態の情報の参照を保持するオブジェクトハッシュ。キー値は、email、max、maxlength、min、minlength、number、pattern、required、urlなど。
　
●状態遷移の例
　
フォームが最初に表示されてからユーザーがフォームに入力し終わるまでの間の状態遷移を示します。
　
①フォームが表示され、まだユーザーがフォームにアクセスしていない状態
pristineかつinvalid
　
②ユーザーがフォームに部分的に入力し始めるなどアクセスしているがバリデーションが満たされていない状態。
　
dirtyかつinvalid
　
③フォームに入力し、バリデーションも満たされている状態
　
dirtyかつvalid
　
２）フォームの状態に対応するCSSクラス
　
・フォームの各状態に対応して下記CSSクラスを動的に生成する。
ng-pristine、ng-dirty、ng-valid、ng-invalid
　
フォームが正常に入力された場合（ng-validかつng-dirty）、正常に入力されていない（ng-invalidかつng-dirty）などの状況に合わせて、背景色を変えるなどの設定を行う事が出来る。
　
３）フォームのバリデーション設定方法の概要
　
・フォームに名前をつける必要がある。
<form name=”testForm”>
　
・フォーム内の入力要素は、親要素であるFormの名前と子要素の名前を使ってその状態にアクセスする。
　
下記フォームの場合、テキストボックスの状態は”testForm.formText”の変数を使ってアクセスする。
　
<form name=”testForm”>
　<input type=”text” name=”formText” ng-model=”formTextValue” />

入力チェックを行うのはinput要素が多いのでinput要素のみ示します。
　
１）input type=”text”の入力チェック
　
<input type=”text”
　ng-model=””
　[name=””]
　[required=””]
　[ng-required=””]
　[ng-minlength=””]
　[ng-maxlength=””]
　[ng-pattern=””]
　[ng-change=””]
　[ng-trim=””]>
　
使用例）
<input type=”text”
　required
　ng-model=”textValue”
　ng-minlength=”3″
　ng-maxlength=”10″
　ng-pattern=”/^[A-Z0-9]+$/” />
　
２）input type=”number”の入力チェック
　
<input type=”number”
　ng-model=””
　[name=””]
　[min=””]
　[max=””]
　[required=””]
　[ng-required=””]
　[ng-minlength=””]
　[ng-maxlength=””]
　[ng-pattern=””]
　[ng-change=””]>
　
使用例）
<input type=”number”
　ng-model=”numberValue”
　min=”5″
　max=”12″/>

デモとコードサンプルはこちら。
　
●サンプルコードの仕様
　
１）フォーム全体
　
①CSS
　
・初期状態は背景色無し。すべての入力項目が正常に入力されたらフォーム全体の背景色をライトグリーン。正常の状態で無い場合はライトピンク。
　
利用できそうなBootstrap3のCSSクラスが見つからなかったので直接CSSを設定。
form.ng-invalid.ng-dirty { background-color: lightpink; }
form.ng-valid.ng-dirty { background-color: lightgreen; }
　
②送信ボタン
　
すべての入力項目が正常に入力されるまではボタン押下を無効。
<button ng-disabled=”appForm.$invalid”
　
２）フォーム内の入力項目
　
①CSS
　
・テキストボックスのborder-colorなどをBootstrap3のhas-errorクラスを使って設定。
　
AngularJSのng-classを使ってフォームの入力項目が状態が$invalidかつ$dirtyの場合のみ’has-error’クラスを動的に追加するように設定しています。
　
<div class=”form-group” ng-class=”{‘has-error’: appForm.name.$invalid && appForm.name.$dirty}”>
　
・エラーメッセージをBootstrap3のtext-dangerクラスを使って文字色などを設定。
　
AngularJSのng-showを使ってフォームの入力項目の状態が$invalidかつ$errorの場合のみエラーメッセージを表示し、メッセージのCSS設定として’text-danger’クラス設定しています。
　
<span class=”text-danger” ng-show=”appForm.name.$dirty && appForm.name.$error.required”>必須項目: 会員番号を入力してください。</span>
　
②各入力項目のチェック内容
　
・フォームの各入力項目は必須項目なので”required”を指定。
　
・会員番号は、英半角大文字の5～10文字に制限しています。
　
ng-minlength=”5″ ng-maxlength=”10″ ng-pattern=”/^[A-Z0-9]+$/”
　
・メールアドレスについては、明示的にフォーマットチェックを指定していませんが、type=”email”を指定してあると自動でフォーマットチェックしてくれるようです。
　
※マニュアルの記述
input[email] uses a regex to validate email addresses that is derived from the regex used in Chromium.