I have this custom validation directive:
/**
* Overwrites default url validation using Django's URL validator
* Original source: http://stackoverflow.com/questions/21138574/overwriting-the-angularjs-url-validator
*/
angular.module('dmn.vcInputUrl', [])
.directive('vcUrl', function() {
// Match Django's URL validator, which allows schemeless urls.
var URL_REGEXP = /^((?:http|ftp)s?:\/\/)(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(?::\d+)?(?:\/?|[\/?]\S+)$/i;
var validator = function(value) {
if (!URL_REGEXP.test(value) && URL_REGEXP.test('http://' + value)) {
return 'http://' + value;
} else {
return value;
}
}
return {
require: '?ngModel',
link: function link(scope, element, attrs, ngModel) {
function allowSchemelessUrls() {
// Silently prefixes schemeless URLs with 'http://' when converting a view value to model value.
ngModel.$parsers.unshift(validator);
ngModel.$validators.url = function(value) {
return ngModel.$isEmpty(value) || URL_REGEXP.test(value);
};
}
if (ngModel && attrs.type === 'url') {
allowSchemelessUrls();
}
}
};
});
It works fine when you 'dirty' the input by typing or pasting, but I need it to run this validation, overwriting the default type="url" validation when the value is initially set in the ngModel.
I've tried adding ngModel.$formatters.unshift(validator); but it results in the 'http://' being added to input, which I need to avoid as user's changes are manually approved and it would be a waste of time to approve the addition of 'http://'.
Any help would be appreciated!
Set ng-model-options on the input type field, for example:
<input type="text"
ng-model-options="{ updateOn: 'default', debounce: {'default': 0} }"</input>
This will ensure your validator gets fired "when the value is initially set in the ngModel", as you have stated in the question.
See detailed AngularJs documentaion on ngModelOptions:enter link description here
validation of Url :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="form">
URL: <input type="url" ng-model="url.text" placeholder="Enter Link" name="fb_link"></input>
<span class="error" ng-show="form.fb_link.$error.url"></span>
</form>
Related
I would like to make my service be able to handle any input field. At the moment I am manually writing everything and it's starting to amount to a lot of manual work. Is there a way to send the element object when the elements ng-change property is invoked? I can then change the elements ng-class as a result of that.
Html:
<input type="text" id="email" data-ng-model="email" data-ng-change="changeEmail()" placeholder="your email here" data-ng-class="emailFormControlColor">
In the controller:
$scope.changeEmail = function () {
if ($checkInput.checkEmail($scope.email)) {
// email input is good
$scope.emailFormControlColor = 'form-control-success'; // change from error to success
} else {
// email input is bad
if ($scope.emailFormControlColor === 'form-control-success')
$scope.emailFormControlColor = 'form-control-error'; // change from success to error
}
};
The service (this is included in the controller arguments ofc.):
.service('checkInput', ['$controller', '$window', '$location', function ($controller, $window, $location) {
return {
checkEmail: function (email) {
// <--- I would like to update the ng-class of the focused element here! This would result in me not manually having to write code for each input!
var regex = /^[^\s#]+#[^\s#]+\.[^\s#]+$/;
return regex.test(email);
}
};
}])
The code above is how i have it now. As you can see I'm manually changing the $scope.emailFormControlColor.
Imagine I have three input fields:
<input type="text" id="email1" data-ng-model="email1" data-ng-change="changeEmail()" placeholder="your email here" data-ng-class="emailFormControlColor1">
<input type="text" id="email2" data-ng-model="email2" data-ng-change="changeEmail()" placeholder="your email here" data-ng-class="emailFormControlColor2">
<input type="text" id="email3" data-ng-model="email3" data-ng-change="changeEmail()" placeholder="your email here" data-ng-class="emailFormControlColor3">
How could I write my service so that I do not have the write the following manually:
$scope.emailFormControlColor1 = 'form-control-success';
$scope.emailFormControlColor2 = 'form-control-success';
$scope.emailFormControlColor3 = 'form-control-success';
I hope my question is clear, otherwise say and I'll update it!
I think using a directive to solve this problem is more desirable. For one, it's considered an anti-pattern to modify the DOM in a controller or a service.
The other reason is that when you use a directive, you will be provided the DOM element that the directive was used on. Here's some untested code that you might use as a starting point:
myModule.directive('checkEmail', function() {
require: 'ngModel',
link: function(scope, element, attributes, ngModelController) {
// require that ng-model is used on this element, so you can hook
// into the Angular validator pipeline ...
ngModelController.validators.checkEmail = function(modelValue, viewValue) {
// now return true or false if viewValue is considered valid
var regex = /^[^\s#]+#[^\s#]+\.[^\s#]+$/;
var isValid = regex.test(viewValue);
// but you also have an opportunity to do your DOM manipulation
element.toggleClass('form-control-success', isValid);
element.toggleClass('form-control-error', !isValid);
return isValid;
});
}
});
Instead of applying the CSS class as above, you could just use Angular's built in validation system. Your directive code is the same as above, except you don't apply any CSS classes in the directive. When the validation code in the directive returns false, Angular will make the field invalid ... and you can use this fact to apply the CSS in your HTML:
<form name="myForm">
<input ng-model="whatever"
name="email"
check-email
ng-class="{'form-control-success': myForm.email.$valid, 'form-control-error': myForm.email.$invalid}">
</form>
The above applies the CSS anytime the field is invalid, but you can also apply it when a specific validation error occurs, in this cased we named the validator "checkEmail", so this also would work:
<form name="myForm">
<input ng-model="whatever"
name="email"
check-email
ng-class="{'form-control-success': !myForm.email.$error.checkEmail, 'form-control-error': myForm.email.$error.checkEmail}">
</form>
I would create an object that contains all of the information you need for each email. Something like this:
HTML:
<input type="text" id="email0" data-ng-model="emails[0].value" data-ng-change="changeEmail(emails[0])" placeholder="your email here" data-ng-class="emails[0].class">
<input type="text" id="email1" data-ng-model="emails[1].value" data-ng-change="changeEmail(emails[1])" placeholder="your email here" data-ng-class="emails[1].class">
<input type="text" id="email2" data-ng-model="emails[2].value" data-ng-change="changeEmail(emails[2])" placeholder="your email here" data-ng-class="emails[2].class">
JavaScript:
$scope.emails = [
{ value: '', class: '' },
{ value: '', class: '' },
{ value: '', class: '' },
];
$scope.changeEmail = function (email) {
if ($checkInput.checkEmail(email)) {
// email input is good
email.class = 'form-control-success'; // change from error to success
} else {
// email input is bad
if (email.class === 'form-control-success') {
email.class = 'form-control-error'; // change from success to error
}
}
};
If appropriate, you could use something like ng-repeat to avoid copy/paste in the HTML.
Even though Sunil D. pointed me basically to the answer the code is incorrect. Down below is the code that makes it work. http://codepen.io/basickarl/pen/MyoZNB
HTML:
<div ng-app="app" ng-controller="ctrl">
<form name="myForm">
<input ng-model="name" name="name">
<input ng-model="email" name="email" check-email>
</form>
</div>
CSS:
input {
border: 5px;
border-style: solid;
border-color: silver;
}
.input-invalid {
border-color: red;
}
.input-valid {
border-color: lime;
}
JS:
var app = angular.module('app', []);
app.controller('ctrl', ['$scope', function($scope) {
$scope.name = "";
$scope.email = "";
}]);
app.directive('checkEmail', [function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, el, attr, ctrl) {
ctrl.$validators.checkEmail = function(modelVal, viewVal) {
var regex = /^[^\s#]+#[^\s#]+\.[^\s#]+$/;
var isValid = regex.test(viewVal);
el.toggleClass('input-valid', isValid);
el.toggleClass('input-invalid', !isValid);
return isValid;
}
}
}
}]);
I have made an attempt to create a custom validation directive to validate two items simultaneously at server side.
I have two values regNumber and regDate that have to be validated along with each other. So when user enters both of them correctly,they are validate. But, if one of them is entered incorrectly, they both have to be invalidated.
To accomplish the goal, I have written a the following directive base on this post.
Everything is working fine except When I enter both together regNumber and regDate incorrectly. Then, even If I change them both to correct values, still they are invalidated.
By "Everythin is working fine" I mean when I enter an invalid value for regNumber and a valid value for regDate, and change the regNumber back to a valid value, it works fine and vice versa(first regDate and then regNumber).
I think $setValidatity will be set for the latest input which has been changed and not for both of them but even if my guess is true, I don't know how to solve it. :D
Directive:
osiApp.directive('uniqueOrder', function ($http, $rootScope) {
var toId;
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elem, attr, ctrl) {
scope.$watch(attr.ngModel, function (value) {
if (scope.osiRequest.regDate) {
ctrl.$setValidity('uniqueOrder', true);
if (toId) clearTimeout(toId);
toId = setTimeout(function () {
$http({
method: 'GET',
url: $rootScope.baseAddress + '/ValidateOrderRegistrationNumber/Get',
params: {
orderRegistrationDate: scope.osiRequest.regDate ,
orderRegistrationNumber: scope.osiRequest.regNumber
}
}).success(function (isValid) {
ctrl.$setValidity('uniqueOrder', isValid);
});
}, 200);
}
});
}
}
});
HTML:
<div class="form-group" ng-class="myForm.regNumber.$error.uniqueOrder ||
myForm.regDate.$error.uniqueOrder ? 'has-error' : ''">
<input class="form-control"
name="regNumber" ng-model="osiRequest.regNumber" unique-order>
</div>
<div class="form-group" ng-class="myForm.regNumber.$error.uniqueOrder ||
myForm.regDate.$error.uniqueOrder ? 'has-error' : ''">
<input class="form-control"
name="regDate" ng-model="osiRequest.regDate " unique-order>
</div>
As mentioned by #NicolasMoise you have to be able to access both model in your directive, few ways to achieve this :
Adding both ng-model osiRequest.regDate & osiRequest.regNumber as your directive attributes unique-order. Check "scope" parameter for directive.
Access parent controller scope from directive by using $parent ( not ideal )
Here's a jsfiddle example of what I'm trying to accomplish.
I'm trying to build a US phone number input where the view displays as (333) 555-1212, but the model binds to the numeric integer 3335551212.
My intention is to add custom validators to NgModelController which is why I have require: ng-model; there are simpler solutions without the isolate scope and NgModelController, but I need both.
You'll see an immediate error in the console: Error: Multiple directives [ngModel, ngModel] asking for 'ngModel' controller on: <input ng-model="user.mobile numeric" name="telephone" type="tel"> -- thought I was using an isolate scope here...
Thank you for looking #mimir137 but I appear to have solved it:
http://jsfiddle.net/hr121r18/8/
The directive was using replace: true, which ends up with this structure:
<form ng-controller="FooCtrl" class="ng-scope">
<p>Enter US phone number</p>
<input ng-model="user.mobile numeric" name="telephone" type="tel">
</form>
Both the template and the markup called for ng-model which led to the symptomatic error in the problem description. Once I removed that, it leads to this markup (note the wrapper element phone-number):
<form ng-controller="FooCtrl" class="ng-valid ng-scope ng-dirty ng-valid-parse" abineguid="BC0D9644F7434BBF80094FF6ABDF4418">
<p>Enter US phone number</p>
<phone-number ng-model="user.mobile" class="ng-untouched ng-valid ng-isolate-scope ng-dirty ng-valid-parse">
<input ng-model="numeric" name="telephone" type="tel" class="ng-valid ng-dirty ng-touched">
</phone-number>
</form>
But removing this required changes to $render; the elem passed into the link function is now phone-number and so you need to dig to grab the input inside it and set the value on that:
ngModel.$render = function () {
elem.find('input').val($filter('phonenumber')(ngModel.$viewValue));
};
There were a few other issues. $render() also needed to be called from the watcher.
Final:
var app = angular.module('myApp', []);
// i want to bind user.mobile to the numeric version of the number, e.g. 3335551212, but
// display it in a formatted version of a us phone number (333) 555-1212
// i am trying to make the directive's scope.numeric to have two-way binding with the controller's
// $scope.user.mobile (using isolate scope, etc.).
app.controller('FooCtrl', function ($scope) {
$scope.user = {
mobile: 3335551212
};
});
app.directive('phoneNumber', ['$filter', function ($filter) {
return {
restrict: 'E',
template: '<input ng-model="numeric" name="telephone" type="tel">',
require: 'ngModel',
scope: {
numeric: '=ngModel'
},
link: function (scope, elem, attrs, ngModel) {
// update $viewValue on model change
scope.$watch('numeric', function () {
ngModel.$setViewValue(scope.numeric);
ngModel.$render();
});
// $modelValue convert to $viewValue as (999) 999-9999
ngModel.$formatters.push(function (modelValue) {
return $filter('phonenumber')(String(modelValue).replace(/[^0-9]+/, ''));
});
// $viewValue back to model
ngModel.$parsers.push(function (viewValue) {
var n = viewValue;
if (angular.isString(n)) {
n = parseInt(n.replace(/[^0-9]+/g, ''));
}
return n;
});
// render $viewValue through filter
ngModel.$render = function () {
elem.find('input').val($filter('phonenumber')(ngModel.$viewValue));
};
}
};
}]);
app.filter('phonenumber', function () {
return function (number) {
if (!number) {
return '';
}
number = String(number);
var formattedNumber = number;
var c = (number[0] === '1') ? '1 ' : '';
number = number[0] === '1' ? number.slice(1) : number;
var area = number.substring(0, 3),
exchange = number.substring(3, 6),
subscriber = number.substring(6, 10);
if (exchange) {
formattedNumber = (c + '(' + area + ') ' + exchange);
}
if (subscriber) {
formattedNumber += ('-' + subscriber);
}
return formattedNumber;
}
});
HTML
<form ng-controller="FooCtrl">
<p>Enter US phone number</p>
<phone-number ng-model='user.mobile'></phone-number>
</form>
I created this fiddle that gets rid of most of your errors coming up in the console. Hopefully this will at least be able to put you on the right track.
I changed the template so that you can see that the filter is actually working.
It now has the typical {{ngModel | FilterName}} in plain text underneath the textbox.
The only real issue is displaying it in the textbox. I'm sure you will have no problem with that. I will check in the morning just in case you still have questions regarding this.
Edit: Alright it appears you have solved it already. Great job!
I don't get this sorted out. I try to add validation (for form submit deactivation if invalid) wether an array contains items or not. i tried using a custom directive but it never gets called when the model updates :(
as the angular stuff is rendered inside a play applications template and the form is not defined within my scope I cannot do some easy form invalidation.
what i try to achieve is invalidating the form until some category has been added to $scope.app.categories thereby deactivating the submit button which is also not within my scope.
here comes the code (angular version 1.2.23):
<input type="text" ng-model="app.categories" name="size" custom />
<input id="tagsinput" type="text" ng-model="new.category" on-keyup="disabled" keys="[13]"/>
<a class="btn" ng-click="addCategory()">Add</a>
// loading of app happens above this is the contoller function
$scope.addCategory = function () {
$scope.app.categories.push({name: $scope.new.category});
$scope.new.category = "";
}
app.directive('custom', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$formatters.unshift(function(val1, val2, val3, val4) {
// not even gets called would like to validate app.categories here :(
console.log(true);
});
}
};
});
You're using $formatters, but for validation you should use $validators. Instead of your line starting with ctrl.$formatters, try the following:
ctrl.$validators.yourValidatorName = function(modelValue, viewValue) {
console.log("Validator is called.");
return true; // This means validation passed.
};
You can find this in the documentation. Also do not forget to add the directive to the HTML element, so in your case <input ... custom>. To disable a submit button if validation fails, use <input type="submit" data-ng-disabled="formName.$invalid">.
I have a simple html form containing regular text input. ng-minlength, ng-maxlength and ng-pattern angular built-in form input directives are set on the input.
Problem: ng-pattern check is applied before the length check by ng-minlength and ng-maxlength.
Question: how can I change the default check order: i.e. first check for the length, then apply pattern check?
Example:
<body ng-app>
<div>
<form name="myForm">
Name: <input name="name" type="text" ng-model="name" ng-minlength="3" ng-maxlength="16" ng-pattern="/^\w+$/"/>
<div ng-show="myForm.name.$dirty && myForm.name.$invalid">
<span ng-show="myForm.name.$error.pattern">Pattern error</span>
<span ng-show="myForm.name.$error.minlength || myForm.name.$error.maxlength">Length error</span>
</div>
<br/>
<input type="submit" value="Submit">
</form>
</div>
</body>
Current behavior:
enter "#" - see "Pattern error"
enter "###" - see "Pattern error"
Desired behavior:
enter "#" - see "Length error"
enter "###" - see "Pattern error"
FYI, related jsfiddle.
Thanks in advance.
Write your own directive:
var mod = angular.module("myApp", []);
mod.directive("nameValidation", function () {
return {
restrict: "A",
require: "ngModel",
link: function (scope, element, attrs, ngModelCtrl) {
var validate = function (value) {
var minLen = parseInt(attrs.myMinlength, 10),
maxLen = parseInt(attrs.myMaxlength, 10),
pattern = attrs.myPattern,
match = pattern.match(/^\/(.*)\/([gim]*)$/),
lenErr = false;
if (match) {
pattern = new RegExp(match[1], match[2]);
}
if (!ngModelCtrl.$isEmpty(value)) {
ngModelCtrl.$setValidity("pattern", true);
if ((minLen && value.length < minLen) || (maxLen && value.length > maxLen)) {
ngModelCtrl.$setValidity("length", false);
lenErr = true;
}
else {
ngModelCtrl.$setValidity("length", true);
lenErr = false;
}
if (!lenErr) {
if (match && !pattern.test(value)) {
ngModelCtrl.$setValidity("pattern", false);
}
else {
ngModelCtrl.$setValidity("pattern", true);
}
}
}
else {
ngModelCtrl.$setValidity("length", true);
ngModelCtrl.$setValidity("pattern", true);
}
}
ngModelCtrl.$parsers.push(validate);
ngModelCtrl.$formatters.push(validate);
}
}
});
Then in your HTML, include the app and use the directive:
<body ng-app="myApp">
<div>
<form name="myForm">
Name: <input name="name" type="text" ng-model="name" name-validation="" my-minlength="3" my-maxlength="16" my-pattern="/^\w+$/"/>
<div ng-show="myForm.name.$dirty && myForm.name.$invalid">
<span ng-show="myForm.name.$error.pattern">Pattern error</span>
<span ng-show="myForm.name.$error.length">Length error</span>
</div>
<br/>
<input type="submit" value="Submit">
</form>
</div>
</body>
The directive uses my-minlength, my-maxlength, and my-pattern for the three values. If length fails, that will trip first. If not, then pattern will show as error if it doesn't match. Consider renaming this directive if you want to use it other places besides name as minlength, maxlength, and pattern can be passed to it via attributes. If they are left off, they will be ignored.
See jsfiddle: http://jsfiddle.net/4zpxk/6/
I searched in angular code why this behavior. Then in the function 'textInputType' that it's the specific function that handles text inputs for the angular 'input' directive I found this at the end of this function, where we can see three blocks of code.
// pattern validator
if (pattern){
//validator logic
}
// min length validator
if (attr.ngMinlength) {
//validator logic
}
// max length validator
if (attr.ngMaxlength) {
//validator logic
}
So, no matter if you change the declaration order of your ng-* attributes in the html input element you will always get same result but if you change the order of the blocks, I mean, put the min length validator block before pattern validator block you will have the result that you expect.
This is a solution for your problem but you have to make a litte change in angular code and I don't know if you really like this. But you got a very common situation where order of the declaration of validation concepts matters, so, something more must be done to handle this. Thanks
You cannot change the default check order unfortunately.
One solution is to write a custom validator, not that difficult. Based on this answer, I came up with this code (fiddle)
Usage: There is an array of validation functions in the scope, they get passed to our custom directive "validators" as:
<input name="name" type="text" ng-model="name" validators="nameValidators"/>
A validator function would look like (e.g. for the minlength constraint):
function minlength(value, ngModel) {
if( value == null || value == "" || value.length >= 3 ) {
ngModel.$setValidity('minlength', true);
return value;
}
else {
ngModel.$setValidity('minlength', false);
return;
}
}
Important points are: it takes the value and the ngModel as arguments, performs the test (here value.length >= 3) and calls ngModel.$setValidity() as appropriate.
The directive registers the given functions with ngModel.$parsers:
app.directive("validators", function($parse) {
return {
restrict: "A",
require: "ngModel",
link: function(scope, el, attrs, ngModel) {
var getter = $parse(attrs.validators),
validators = getter(scope),
i;
for( i=0; i < validators.length; i++ ) {
ngModel.$parsers.push((function(index) {
return function(value) {
return validators[index](value, ngModel);
};
})(i));
}
}
};
});
Many details can be tweaked and improved, but the outline works (again link to fiddle). Now the order of validation is explicitly set by the order of the validator functions in the nameValidators array.
If you use ng-messages you should be able to set the order via the order of ng-message elements, e.g:
<div ng-messages="field.$error">
<ul class="validation-errors">
<li ng-message="required">This has the highest prio</li>
<li ng-message="min">Second in command</li>
<li ng-message="max">I'm last</li>
</ul>
</div>
Also the docs on this: https://docs.angularjs.org/api/ngMessages/directive/ngMessages
i just changed the order of your directives, pattern first
<input name="name" type="text" ng-model="name" ng-pattern="/^\w+$/" ng-minlength="3" ng-maxlength="16"/>
EDIT: uuum, tested your fiddel without changes and it shows your desired behavior ...
directives are compiled by priority, bbut i don't know how to set angulars directives priority ... sorry, should have tested this first