カスタムバリデーションのオブジェクトを、validationUtilsに集約して、使用するアプリケーションごとにディレクティブに登録すると便利なんじゃないかと思ったので、とりあえず書いてみました。
以下コード。
簡単にコピペで試せるように一つのHTMLにまとめてあります。
ajs.confirm.html
<!DOCTYPE html>
<html lang="ja"><head><meta charset="utf-8" /></head>
<body>
<div ng-app="app" ng-controller="confirmCtrl">
<form name="form" novalidate>
<div>
<input type="text" ng-model="target" name="target" />
<input type="text" ng-model="targetConfirm" name="targetConfirm"
confirm="target"
/>
</div>
<p ng-show="form.targetConfirm.$error.confirm">password confirmation invalid</p>
<button ng-disable="form.$invalid">button</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script>
// commonUI.js
angular.module('commonUI',[]).
factory('validationUtils',[function(){
return {
confirm : {
require : 'ngModel',
scope : false,
link : function(scope,elm,attr,ctrl){
var confirm = function (viewValue) {
var form = 'form';
if(elm.length){
form = elm[0].form.name;
}else if(elm.context){
form = elm.context.form.name;
}
var valid = viewValue != scope[form][attr.confirm].$viewValue;
ctrl.$setValidity('confirm', !valid);
if(!valid){ return viewValue; }
};
ctrl.$parsers.unshift(confirm);
ctrl.$formatters.unshift(confirm);
}
}
};
}]);
</script>
<script>
// app.js
var app = angular.module('app', ['commonUI']);
app.controller('confirmCtrl',['$scope',function ($scope) {
$scope.target = 'abcd';
$scope.targetConfirm = 'abcd';
}]);
app.directive('confirm',['validationUtils',function(validationUtils){
return validationUtils.confirm;
}]);
</script>
</body></html>