お遊びを離れ、何かやろうとすると直ぐにカスタムバリデートが必要になるので、そのやり方。

1.3から簡単になったらしいが、その前を知らないので、感動は薄い。

普通？のバリデーションに加え、サーバを非同期で見に行くバリデーションも作れる。ユーザーの一意性チェックなどには重宝するだろう。

###やること

nameには、普通？のバリデーションんを書けている（全部小文字じゃないとだめ）
nicknameはサーバに問合せ、ユニークかどうかをチェックする（サーバはokかngを返すイメージ）

###ポイントと課題

非同期のバリデーションはngModel.$asyncValidatorsを使うことで実現できる。また、全部入力時に初めて評価したいため、ng-model-options="{updateOn: 'blur'}"により、フォーカスが外れた時にチェックがかかるようにしている（が、そうならない）。

ng-model-options="{updateOn: 'blur'}"をつけていても、初回読み込み時に１度実行されてしまう。何かやり方がおかしいのだろうけど、初回時は値がundefinedなので、それで判断して場合分けしている・・・。うーん。

あと、ngModel.$asyncValidatorsの返り値はpromise(then...)じゃないとだめ。最初、直接true,falseを返していてしばらくハマった。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
	
	//function
	$scope.addUser = function(){
		alert("added");
	}

});

//普通？のバリデーション
app.directive('usernameValidator',function(){
	return{
		restrict: "A",
		require: "ngModel",
		link: function(scope,element,attrs,ngModel){
			ngModel.$validators.username = function(modelValue,viewValue){
				var value = modelValue || viewValue;
				return /^[a-z]+$/.test(value);
			}
		}
	}
});

//サーバを見に行くバリデーション
app.directive('nicknameValidator',function($http,$q){
	return{
		restrict: "A",
		require: "ngModel",
		link: function(scope,element,attrs,ngModel){
			//戻り値はpromiseでなくてはならない（直true, false)ではNGになる。
			ngModel.$asyncValidators.nickname = function(modelValue,viewValue){

				var value = modelValue || viewValue;

				//読み込時は何もしない（''とすると何もしないのでそうしている。なにかよい方法がないか・・・）
				if(value == undefined){
					return $http.get('').then(function(){

					},function(){

					});
				}

				//on blurで非同期チェック
				return $http.get('res.php').then(function(res){
					if(res.data == "ok"){
						return true;
					}else{
						return $q.reject();
					}
				});
			}
		}
	}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form novalidate name="myForm" ng-submit="addUser()">

<!-- text -->
<p>
Name:<input type="text" name="name" ng-model="name" username-validator>
<span ng-show="myForm.name.$error.username">name contain only lowercharactors.</span>
</p>

<p>
NickName:<input type="text" name="nickname" ng-model="nickname" nickname-validator ng-model-options="{updateOn: 'blur'}">
<span ng-show="myForm.nickname.$error.nickname">aleady exits.</span>
</p>

<!-- submit -->
<p><input type="submit" value="add"></p>

<pre>{{name}}</pre>
</form>
</body>
</html>