Skip to content

Instantly share code, notes, and snippets.

@evangalen

evangalen/app.js

Last active December 23, 2015 18:09
Show Gist options
  • Save evangalen/6674259 to your computer and use it in GitHub Desktop.
Save evangalen/6674259 to your computer and use it in GitHub Desktop.
Download ZIP
Plunk using the custom "jdOnlyLetters" directive that does show invalid valid (as opposed to: ng-pattern="/^[a-zA-Z]*$/")
Raw
app.js
angular.module('plunker', ['jdOnlyLetters']);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1"></script>
<script src="jdOnlyLetters.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker">
<div ng-init="letters='1'">
letters = {{'' + letters}}<br>
<input type="text" ng-model="letters" jd-only-letters />
</div>
</body>
</html>
Raw
jdOnlyLetters.js
angular.module('jdOnlyLetters', [])
.directive('jdOnlyLetters', function() {
return {
require: 'ngModel',
link: function($scope, $element, $attrs, ngModelController) {
ngModelController.$formatters.push(function(value) {
var onlyLettersRegex = /^[a-zA-Z]*$/;
var isValid = typeof value === 'string'
&& value.match(onlyLettersRegex);
ngModelController.$setValidity('jdOnlyLetters', isValid);
return value;
});
}
};
});
Raw
style.css
input.ng-invalid:focus {
border-color: #E9322D;
box-shadow: 0 0 6px #F8B9B7;
}
input.ng-invalid:not(:focus) {
background-color: #FA787E;
}
input.ng-pristine.ng-invalid-required {
background-color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment