JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
<div ng-app="myModule">
<div ng-controller="DefaultCtrl">
<form name="myForm">
<input name="salesPrice" type="text" ng-model="salesPrice" base-price-validator="">
<span ng-show="myForm.salesPrice.$error.basePriceValidator">This is not valid base price!</span>
</form>
</div>
</div>
JavaScript
var myModule = angular.module('myModule', []);
myModule.directive('basePriceValidator', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if (viewValue == '2,10') {
// it is valid
ctrl.$setValidity('basePriceValidator', true);
return viewValue;
} else {
// it is invalid, return undefined(no model update)
ctrl.$setValidity('basePriceValidator', false);
return undefined;
}
});
}
};
});
function DefaultCtrl($scope) {}