angularJSのrequiredと$error。

Level 2｜｜2016/07/28

今回は、必須項目を設定するrequiredと、エラーかどうか判断してメッセージを表示する$errorを学びます。

まずは、全体の動きを確認

実際にサンプルを触ってみたい方はこちら

<form name="myForm" ng-submit="onsubmit()" novalidate>
<label for="mail">メールアドレス：</label>
<!-- テキストボックス -->
<input id="mail" name="mail" type="email" ng-model="mail" required />

<!-- 必須項目 -->
<span ng-show="myForm.mail.$error.required">必須</span>
<!-- エラーメッセージ -->
<span ng-show="myForm.mail.$error.email">メールアドレスを正しい形式で入力</span>
</form>
            

上記サンプルを説明すると、
1)フォーム名「myForm」の要素のname「mail」に入力された値を
2)type「email」の正規表現でマッチするかチェックし
3)「myForm」の「mail」の値が未入力の場合、「必須」のメッセージを出し
4)入力されたけど正規表現とマッチしていない間は 「メールアドレスを正しい形式で入力」のメッセージを出し
5)正規表現とマッチしたら、メッセージは消えます。

「ng-model」「name」を設定

<label for="mail">メールアドレス：</label>
<!-- テキストボックス -->
<input id="mail" name="mail" type="email" ng-model="mail" required />
            

AngularJSの検証機能を有効にするために、「ng-model」を設定しておきます。設定することで、スコープオブジェクトのプロパティに紐づけることができますし、実際に送受信をする際のJS側の設定でも使えます。（説明は別の機会に・・・・。）
 
また、「name」も必ず設定します。
サンプルではng-modelと同じ名前「mail」になっていますが、別の名前でも大丈夫です。項目数が多い時は、別の名前のほうが管理しやすいと思います。「name」は、先に説明した通り、検証結果を検出する際に、参照するテキストボックスを指定するので必須です。
 
「type」には、「email」という検証ルールが入っています。AngularJSでは、typeごとに拡張されていて、HTML5よりもリッチに検証できます。type属性は「email」以外にも「tel」「password」「datetime」「number」などが用意されていますので、紹介しておきます。

type	属性	内容
共通	ng-model	入力ボックスにバインド
	name	要素名
	required	必須かどうか
	ng-required	必須の場合
number/date/datetime-local/ time/month/week	min	最小値
	max	最大値
text/number/email/url/<textarea>	ng-minlength	最小文字数
	ng-maxlength	最大文字数
	ng-pattern	正規表現/文字列パターン

「$error」を設定

<!-- 必須項目 -->
<span ng-show="myForm.mail.$error.required">必須</span>
<!-- エラーメッセージ -->
<span ng-show="myForm.mail.$error.email">メールアドレスを正しい形式で入力</span>

            

「$error」は検証結果を参照し結果を返します。

フォーム名.要素のname.$error.検証の型

フォーム名と要素のnameは先に説明した通りです。
「検証の型」についてサンプルを見ると、「required」と「email」の型が指定されています。
「required」は入力必須なので、入力されたかを検証します。
未入力の場合は「必須」メッセージを表示し、入力されたらメッセージは非表示となります。
 
「email」はメールアドレスの型にマッチしているかどうかを検証します。
入力した値が型にマッチするまで「メールアドレスを正しい形式で入力」メッセージを表示して、型にマッチしたらメッセージは非表示となります。
 
そして、「ng-show」属性を使ってメッセージを切り替えます。
「ng-show」属性を使った場合、1つの検証の型に対してのメッセージを表示します。
 
でも、もしエラーメッセージを複数設定した場合、ユーザーのストレスを軽減するためにも、今あるエラー情報をあらかじめユーザーに示しておくほうが良いです。その場合は、「ng-massages」属性と「ng-massage」属性を利用します。（説明は別の機会に・・・・。）

$errorの検証トークン

サンプルで紹介した「required」「email」は、$errorで使える検証トークン（検証名）です。このほかにも$errorで使える検証トークンを紹介しておきます。

検証トークン	検証内容
email	メールアドレスのフォーマット（型）を検証
max	最大値を検証
maxlength	文字列の最大長を検証
min	最小値を検証
minlength	文字列の最小長を検証
number	数値を検証
pattern	正規表現を検証
required	必須を検証
url	URLのフォーマット（型）を検証
date	日付のフォーマット（型）を検証
datetimelocal	日付と時刻のフォーマット（型）を検証
time	時刻のフォーマット（型）を検証
week	週のフォーマット（型）を検証
month	月のフォーマット（型）を検証

「required」で項目を必須に設定

<input required />

検証トークンでも説明したとおり、タグに「required」を付加すれば必須項目を設定します。
 
サンプルではそのままダイレクトで「required」を記述していますが、ダイレクトで記述するには、デフォルトで必須項目にしたいという条件下で有効にです。
 
たとえば、ユーザーがアクションを起こした場合にのみ動的に項目を必須に変えたい場合は「ng-required」属性を使います。

「ng-required」属性で動的に必須項目に

「ng-required」属性は、先に説明した「required」を同じ働きをしますが、「ng-required」属性の場合は、Angular式の値により動的に必須項目に変更できます。
 
何も触っていない状態で、上記サンプルの項目「メールアドレス」を見ると、メッセージは何も表示されていません。
また、項目「メールアドレス」にアドレスを入力してみても「メールアドレスを正しい形式で入力」メッセージが出るだけで、必須にはなりません。
 
次に、「メール送信してほしい？」にチェックをしてみてください。すると、メールアドレスのテキストボックスの隣に「必須」というメッセージが表示されました。これで、デフォルトでは必須項目ではなかった「メールアドレス」が、動的に必須項目として処理されます。

<div>
    <label for="send">メール送信してほしい？：<</label>
    <input id="send" name="send" type="checkbox" ng-model="send" />
</div>
<div>
    <label for="mail02">メールアドレス：</label>
    <input id="mail02" name="mail02" type="email" ng-model="mail02" ng-required="send" />
    <span ng-show="myForm.mail02.$error.required">必須</span>
    <span ng-show="myForm.mail02.$error.email">メールアドレスを正しい形式で入力</span>
</div>
            

<input ng-required="式" />

まず、チェックボックスのng-modelに「send」を設定しておきます。次に、テキストボックスに、「ng-required」属性で式を記述、サンプルでは「send」と入力します。これで、ng-modelの「send」に値がある時、「ng-required」属性が有効になり、テキストボックスを動的に必須項目に変更することができました。