テキストボックスに入力できる文字の形式／種別を制限する - UI Mask
UI Maskを利用することで、テキストボックスに入力できる文字列の形式、それぞれの桁で入力できる文字種を制限できます。これによって、例えば郵便番号、電話番号、クレジットカードの番号、プロダクトキー／ライセンスキーなど、あらかじめ桁数と入力可能な文字種が決まっているような項目については、決められた文字しか入力できなくなるので入力ミスを事前に防げます。
また、ハイフン、カッコなど、データベース等に保存する際には不要な文字も入力時にはテキストボックス上に表示しておけますので、値の視認性も改善します。
UI Maskは、Bowerを利用することで、以下のコマンドで実行できます。
bower install --save angular-ui-mask
では、具体的な例もみてみましょう。以下は、プロダクトキー（仮に「99999-999999-99999-AA999」の形式とします）を入力させるためのテキストボックスの例です。
リスト5 mask.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<script src="bower_components/angular/angular.min.js"></script>
<!-- （1）ライブラリ本体をインポート -->
<script src="bower_components/angular-ui-mask/dist/mask.min.js"></script>
<script src="scripts/mask.js"></script>
</head>
<body ng-controller="MyController">
<form>
<div>
<label for="pkey">プロダクトキー：</label>
<!-- （3）テキストボックスに各属性を指定 -->
<input id="pkey" type="text" size="10"
ng-model="product" ui-mask="99999-999999-99999-AA999" />
</div>
<!-- （4）入力値を反映 -->
{{product}}
</form>
</body>
</html>
リスト6 mask.js
// （2）ui.maskモジュールへの依存関係を設定
angular.module('myApp', ['ui.mask'])
.controller('MyController', ['$scope', function($scope) {
}]);
UI Maskを利用するには、ライブラリ本体（mask.js）をインポートした上で（1）、アプリモジュール（myApp）からはui.maskモジュールへの依存関係を設定してください（2）。
あとは、目的のテキストボックスに対して、以下の属性を指定するだけです（3）。
- ng-model属性：入力値を反映させるためのモデル
- ui-mask属性：入力可能な文字列のフォーマット／文字種
ng-mask属性で利用できる文字の種類と、その意味は以下の通りです。
| 文字 | 意味 |
|---|---|
| 9 | 任意の数字 |
| A | 任意のアルファベット |
| * | 任意の数値／アルファベット |
| その他 | 固定文字（入力できない） |
この例であれば、プロダクトキーの区切り文字である「-」は固定文字です。（4）に反映される結果を見ても判るように、固定文字の部分はモデルには反映されない点に注意してください。
