AngularJSアプリケーション開発ガイド

4.6

 テスト

107

と指定されています。

recipeForm

はフォームの名前です。

AngularJS

はフォームに対して、

$valid

や

$invalid

といった特別な変数を追加しています。そして入力が必須のすべての

フィールドをチェックし、これらの変数の値を適宜更新します。例えばレシピのタイトルが

空の場合、

recipeForm.$invalid

の値は

true

になり、

$valid

は

false

になります。その

結果、保存ボタンは即座に無効化されます。

入力される文字列の長さの最大値と最小値や、文字列がマッチするべき正規表現のパターンを指

定することもできます。また、特定の場合にのみ表示されるようなエラーメッセージも指定できま

す。少し寄り道して、簡単な例を紹介することにします。

<form name="myForm">

ユーザー名

: <input type="text" name="userName" ng-model="user.name"

ng-minlength="3">

<span class="error"

ng-show="myForm.userName.$error.minlength">

短すぎます

!</span>

</form>

ここでは、

ng-minlength

ディレクティブによってユーザー名が

3

文字以上でなければならない

とされています。フォーム内で名前の付けられているそれぞれのフィールド（この例ではユーザー

名だけです）に値がセットされますが、このフィールドには

$error

とい