AngularJS TIPS
不正な入力値もモデルに反映させるには？（ng-model-options）
入力フォームに検証機能を付けた場合、デフォルトでは不正値はモデルに反映されない。この制限を回避して反映させる方法を説明する。
AngularJSでは、標準的な<input>要素を拡張しており、検証機能付きのフォームをコーディングレスで実装できます（詳しくは、別稿「TIPS：入力フォームに検証機能を実装するには？」を参照してください）。
検証機能を利用した場合、AngularJSではデフォルトで、不正な入力値を受け付けません。つまり、ng-modelディレクティブで指定されたモデルに対して、undefined値を設定します。
もっとも、「不正な入力値をただはじくのではなく、何らかの処理を施したい」という需要もあるでしょう。そのような場合には、ng-model-optionsディレクティブでallowInvalidパラメーターを設定します。
具体的な例も見てみましょう。以下は、文字列の最小長／最大長を設定したテキストボックスの例です。まずは、デフォルトの挙動から確認します。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<form name="myForm" novalidate>
<p>
<label for="name">名前：</label>
<input id="name" name="name" type="text" ng-model="name"
ng-minlength="2" ng-maxlength="10" />
<span ng-show="myForm.name.$error.minlength">
名前は2文字以上で入力してください。</span>
<span ng-show="myForm.name.$error.maxlength">
名前は10文字以内で入力してください。</span>
</p>
<div>入力した名前：{{name}}</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
}]);
</script>
</body>
</html>
|
例えば上の画面の入力例では、入力された名前は10文字以上あり、文字列長の制限に反していますので、入力値はモデルnameには反映されません（＝ページ下部に入力値が反映されない）。
では、ng-model-optionsディレクティブでallowInvalidパラメーターをtrueに設定してみましょう（以下のコードと画面）。これによって、不正な入力値を受け入れるようになります（デフォルトはfalse）。
|
<input id="name" name="name" type="text" ng-model="name"
ng-minlength="2" ng-maxlength="10"
ng-model-options="{ allowInvalid: true }" />
|
果たして、不正な値を入力しても、確かにモデルnameに入力が反映されていることが確認できます。
処理対象：入力検証 カテゴリ：基本
API：ngModelOptions（ng-model-options）｜ngShow（ng-show） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
※以下では、本稿の前後を合わせて5回分（第58回～第62回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
58. モデルをバインドするテンプレートを指定するには？（ng-bind-template）
AngularJSのディレクティブであるng-bind-template属性を使って、{{...}}エクスプレッションを含むテンプレートをビューにバインドする方法を説明する。
59. 画像を動的に生成するには？（ng-src／ng-srcset）
＜img＞タグのng-src属性に指定する画像リソースのURLをAngularJSのスコープオブジェクト経由で完成させることで、動的に画像を表示する方法を説明する。
60. 【現在、表示中】≫ 不正な入力値もモデルに反映させるには？（ng-model-options）
入力フォームに検証機能を付けた場合、デフォルトでは不正値はモデルに反映されない。この制限を回避して反映させる方法を説明する。
61. 日付／時刻値を入力する際にタイムゾーンを加味するには？（ng-model-options）
ng-model-optionsディレクティブにtimezoneパラメーターを指定することで、タイムゾーンによる時差を加味した日時を＜input＞要素から取得する方法を説明する。
62. モデルへの入出力に際して処理を介するには？（ng-model-options）
入力フォームとモデルをバインドした際に、独自のゲッター／セッター関数を仲介させることで、そのモデルに出し入れする値を検証／加工する方法を説明する。
