Description
A directive to validate a field quickly
Preview Image
Validation Options
- Required
- Number – 0.00
- Date – yyyy-mm-dd
- Time – hh:mm
HTML
Javascript
.directive('validateAs', function () { var link = function (scope, element, attrs, ngModel) { var validateAsTypes = attrs.validateAs.split('|'); function customValidator(ngModelValue) { /** * ITE Required Validator */ if (validateAsTypes.indexOf('required') > -1) { if (ngModelValue.length !== 0) { ngModel.$setValidity('requiredCheck', true); } else { ngModel.$setValidity('requiredCheck', false); } } /** * ITE Email Validator */ if (validateAsTypes.indexOf('email') > -1) { //console.log(ngModel.$modelValue, ':: validating as email'); var expression = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; if (expression.test(ngModelValue)) { ngModel.$setValidity('validEmailAddress', true); } else { ngModel.$setValidity('validEmailAddress', false); } } /** * ITE Number Validator * * To two decimal 0.00 */ if (validateAsTypes.indexOf('number') > -1) { var expression = /^[+]?\d+(\.\d{1,2})?$/; if (ngModelValue !== '' && ngModelValue !== null) { ngModelValue = ( expression.test(ngModelValue) ) ? ngModelValue : null; // If minimum attribute is specified, validate for minimum value if (scope.min) { if (!isNaN(scope.min)) { if (ngModelValue > scope.min) { ngModel.$setValidity('validNumber', !!ngModelValue); } else { ngModel.$setValidity('validNumber', false); } } } else { ngModel.$setValidity('validNumber', !!ngModelValue); } } else { ngModelValue = null; ngModel.$setValidity('validNumber', true); } } /** * ITE Date Validator * * yyyy-mm-dd */ if (validateAsTypes.indexOf('date') > -1) { var expression = /^[0-9]{4}-(((0[13578]|(10|12))-(0[1-9]|[1-2][0-9]|3[0-1]))|(02-(0[1-9]|[1-2][0-9]))|((0[469]|11)-(0[1-9]|[1-2][0-9]|30)))$/; if (ngModelValue !== '' && ngModelValue !== null) { ngModelValue = expression.test( ngModelValue ) ? ngModelValue : null; ngModel.$setValidity('validDate', !!ngModelValue); } else { ngModelValue = null; ngModel.$setValidity('validDate', true); } } /** * ITE Time Validator * * hh:mm = 12:34 */ if (validateAsTypes.indexOf('time') > -1) { var expression = /^([0-9]|0[0-9]|1?[0-9]|2[0-3]):[0-5]?[0-9]$/; if (ngModelValue !== '' && ngModelValue !== null) { ngModelValue = ( expression.test( ngModelValue ) ) ? ngModelValue : null; ngModel.$setValidity('validTime', !!ngModelValue); } else { ngModelValue = null; ngModel.$setValidity('validTime', true); } } return ngModelValue; } ngModel.$parsers.push(customValidator); }; return { restrict: 'A', require: 'ngModel', link: link }; });
One Response
Franszo
This seems like something we need in our library!! Thanks JP! Also good example of how to document it and have it searchable to the team and the world as far as I know…