JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
<script src="https://jonsamwell.github.io/angular-auto-validate/javascripts/angular-auto-validate/dist/jcs-auto-validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<div ng-controller="TestCtrl">
<span>Cars: {{cars.length}}</span>
<form ng-submit="doIt()" novalidate="novalidate">
<input type="text" ng-model="cars.length" array-length="1" element-modifier="myCustomModifierKey" />
<p class="msg"></p>
<input type="submit" value="Go!!">
</form>
</div>
JavaScript
var myApp = angular.module('myApp',['jcs-autoValidate']);
myApp.controller('TestCtrl', function ($scope){
$scope.doIt = function(){
return true;
};
$scope.name = 'Hello';
$scope.cars = [
/* {color: 'red'},
{color: 'blue'} */
];
});
myApp.directive('arrayLength', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$validators.arrayLength = function (modelValue, viewValue) {
return modelValue >= parseInt(attrs.arrayLength);
};
}
};
});
myApp.factory('myCustomElementModifier', [
function () {
var
makeValid = function (el) {
$(el).css('background-color', 'green');
},
makeInvalid = function (el, errorMsg) {
$(el).css('background-color', 'red');
$('.msg').html(errorMsg);
},
makeDefault = function (el) {
$(el).removeCss('background-color');
};
return {
makeValid: makeValid,
makeInvalid: makeInvalid,
makeDefault: makeDefault,
key: 'myCustomModifierKey'
};
}
])
.run([
'validator',
'myCustomElementModifier',
function (validator, myCustomElementModifier) {
validator.registerDomModifier(myCustomElementModifier.key, myCustomElementModifier);
validator.setDefaultElementModifier(myCustomElementModifier.key);
}
])
.run([
'defaultErrorMessageResolver',
function (defaultErrorMessageResolver) {
defaultErrorMessageResolver.getErrorMessages().then(function (errorMessages) {
errorMessages['arrayLength'] = 'Minimo {0}';
});
}
]);