I'm writing a password verify directive :
Directives.directive("passwordVerify",function(){
return {
require:"ngModel",
link: function(scope,element,attrs,ctrl){
ctrl.$parsers.unshift(function(viewValue){
var origin = scope.$eval(attrs["passwordVerify"]);
if(origin!==viewValue){
ctrl.$setValidity("passwordVerify",false);
return undefined;
}else{
ctrl.$setValidity("passwordVerify",true);
return viewValue;
}
});
}
};
});
html :
<input data-ng-model='user.password' type="password" name='password' placeholder='password' required>
<input data-ng-model='user.password_verify' type="password" name='confirm_password' placeholder='confirm password' required data-password-verify="user.password">
Given 2 password fields in a form, if both password values are equal then the field affected by the directive is valid.
The issue is that it works one way (i.e. when I type a password in the password-verify field). However, when the original password field is updated, the password-verify doesn't become valid.
Any idea how I could have a "two way binding verify?"
I use the following directive because I want to re-validate both input field regardless of whether value 1 or value 2 was changed:
directive:
'use strict';
angular.module('myApp').directive('equals', function() {
return {
restrict: 'A', // only activate on element attribute
require: '?ngModel', // get a hold of NgModelController
link: function(scope, elem, attrs, ngModel) {
if(!ngModel) return; // do nothing if no ng-model
// watch own value and re-validate on change
scope.$watch(attrs.ngModel, function() {
validate();
});
// observe the other value and re-validate on change
attrs.$observe('equals', function (val) {
validate();
});
var validate = function() {
// values
var val1 = ngModel.$viewValue;
var val2 = attrs.equals;
// set validity
ngModel.$setValidity('equals', ! val1 || ! val2 || val1 === val2);
};
}
}
});
usage
<input type="password" ng-model="value1" equals="{{value2}}" required>
<input type="password" ng-model="value2" equals="{{value1}}" required>
Creating a separate directive for this is not needed. There is already a build in Angular UI password validation tool. With this you could do:
<input name="password" required ng-model="password">
<input name="confirm_password"
ui-validate=" '$value==password' "
ui-validate-watch=" 'password' ">
Passwords match? {{!!form.confirm_password.$error.validator}}
This should solve it:
View:
<div ng-controller='Ctrl'>
<form name='form'>
<input data-ng-model='user.password' type="password" name='password' placeholder='password' required>
<div ng-show="form.password.$error.required">
Field required</div>
<input ng-model='user.password_verify' type="password" name='confirm_password' placeholder='confirm password' required data-password-verify="user.password">
<div ng-show="form.confirm_password.$error.required">
Field required!</div>
<div ng-show="form.confirm_password.$error.passwordVerify">
Fields are not equal!</div>
</form
</div>
Directive
var app = angular.module('myApp', []);
app.directive("passwordVerify", function() {
return {
require: "ngModel",
scope: {
passwordVerify: '='
},
link: function(scope, element, attrs, ctrl) {
scope.$watch(function() {
var combined;
if (scope.passwordVerify || ctrl.$viewValue) {
combined = scope.passwordVerify + '_' + ctrl.$viewValue;
}
return combined;
}, function(value) {
if (value) {
ctrl.$parsers.unshift(function(viewValue) {
var origin = scope.passwordVerify;
if (origin !== viewValue) {
ctrl.$setValidity("passwordVerify", false);
return undefined;
} else {
ctrl.$setValidity("passwordVerify", true);
return viewValue;
}
});
}
});
}
};
});
Yet another take on this is to match the model of one input to another input’s value.
app.directive('nxEqual', function() {
return {
require: 'ngModel',
link: function (scope, elem, attrs, model) {
if (!attrs.nxEqual) {
console.error('nxEqual expects a model as an argument!');
return;
}
scope.$watch(attrs.nxEqual, function (value) {
model.$setValidity('nxEqual', value === model.$viewValue);
});
model.$parsers.push(function (value) {
var isValid = value === scope.$eval(attrs.nxEqual);
model.$setValidity('nxEqual', isValid);
return isValid ? value : undefined;
});
}
};
});
So, if the password box’s model is login.password then you set the following attribute on the verification box: nx-equal="login.password", and test for formName.elemName.$error.nxEqual. Like so:
<form name="form">
<input type="password" ng-model="login.password">
<input type="password" ng-model="login.verify" nx-equal="login.password" name="verify">
<span ng-show="form.verify.$error.nxEqual">Must be equal!</span>
</form>
Extended version:
For a new project of mine I had to modify the above directive so that it would only display the nxEqual error when, and only when, the verification input had a value. Otherwise the nxEqual error should be muted. Here’s the extended version:
app.directive('nxEqualEx', function() {
return {
require: 'ngModel',
link: function (scope, elem, attrs, model) {
if (!attrs.nxEqualEx) {
console.error('nxEqualEx expects a model as an argument!');
return;
}
scope.$watch(attrs.nxEqualEx, function (value) {
// Only compare values if the second ctrl has a value.
if (model.$viewValue !== undefined && model.$viewValue !== '') {
model.$setValidity('nxEqualEx', value === model.$viewValue);
}
});
model.$parsers.push(function (value) {
// Mute the nxEqual error if the second ctrl is empty.
if (value === undefined || value === '') {
model.$setValidity('nxEqualEx', true);
return value;
}
var isValid = value === scope.$eval(attrs.nxEqualEx);
model.$setValidity('nxEqualEx', isValid);
return isValid ? value : undefined;
});
}
};
});
And you would use it like so:
<form name="form">
<input type="password" ng-model="login.password">
<input type="password" ng-model="login.verify" nx-equal-ex="login.password" name="verify">
<span ng-show="form.verify.$error.nxEqualEx">Must be equal!</span>
</form>
Try it: http://jsfiddle.net/gUSZS/
I have done it without directive.
<input type="password" ng-model="user.password" name="uPassword" required placeholder='Password' ng-minlength="3" ng-maxlength="15" title="3 to 15 characters" />
<span class="error" ng-show="form.uPassword.$dirty && form.uPassword.$error.minlength">Too short</span>
<span ng-show="form.uPassword.$dirty && form.uPassword.$error.required">Password required.</span><br />
<input type="password" ng-model="user.confirmpassword" name="ucPassword" required placeholder='Confirm Password' ng-minlength="3" ng-maxlength="15" title="3 to 15 characters" />
<span class="error" ng-show="form.ucPassword.$dirty && form.ucPassword.$error.minlength">Too short</span>
<span ng-show="form.ucPassword.$dirty && form.ucPassword.$error.required">Retype password.</span>
<div ng-show="(form.uPassword.$dirty && form.ucPassword.$dirty) && (user.password != user.confirmpassword)">
<span>Password mismatched</span>
</div>
https://github.com/wongatech/angular-confirm-field is a good project for this.
Example here http://wongatech.github.io/angular-confirm-field/
The code below shows 2 input fields with the implemented functionality
<input ng-confirm-field ng-model="emailconfirm" confirm-against="email" name="my-email-confirm"/>
<input ng-model="email" name="my-email" />
As of angular 1.3.0-beta12, invalid inputs don't write to ngModel, so you can't watch AND THEN validate as you can see here: http://plnkr.co/edit/W6AFHF308nyKVMQ9vomw?p=preview. A new validators pipeline was introduced and you can attach to this to achieve the same thing.
Actually, on that note I've created a bower component for common extra validators: https://github.com/intellix/angular-validators which includes this.
angular.module('validators').directive('equals', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, elem, attrs, ngModel)
{
if (!ngModel) return;
attrs.$observe('equals', function() {
ngModel.$validate();
});
ngModel.$validators.equals = function(value) {
return value === attrs.equals;
};
}
};
});
angular.module('validators').directive('notEquals', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, elem, attrs, ngModel)
{
if (!ngModel) return;
attrs.$observe('notEquals', function() {
ngModel.$validate();
});
ngModel.$validators.notEquals = function(value) {
return value === attrs.notEquals;
};
}
};
});
I've used this directive with success before:
.directive('sameAs', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if (viewValue === scope[attrs.sameAs]) {
ctrl.$setValidity('sameAs', true);
return viewValue;
} else {
ctrl.$setValidity('sameAs', false);
return undefined;
}
});
}
};
});
Usage
<input ... name="password" />
<input type="password" placeholder="Confirm Password"
name="password2" ng-model="password2" ng-minlength="9" same-as='password' required>
I was dealing with the same issue and found a good blog post about it written by Piotr Buda. It's a good read and it explains the process very well. The code is as follows:
directives.directive("repeatPassword", function() {
return {
require: "ngModel",
link: function(scope, elem, attrs, ctrl) {
var otherInput = elem.inheritedData("$formController")[attrs.repeatPassword];
ctrl.$parsers.push(function(value) {
if(value === otherInput.$viewValue) {
ctrl.$setValidity("repeat", true);
return value;
}
ctrl.$setValidity("repeat", false);
});
otherInput.$parsers.push(function(value) {
ctrl.$setValidity("repeat", value === ctrl.$viewValue);
return value;
});
}
};
});
So you could do something like:
<input type="password" name="repeatPassword" id="repeatPassword" placeholder="repeat password" ng-model="user.repeatPassword" repeat-password="password" required>
Credit goes to the author
Is this not good enough:
<input type="password" ng-model="passwd1" />
<input type="password" ng-model="passwd2" />
<label ng-show="passwd1 != passwd2">Passwords do not match...</label>
<button ng-disabled="passwd1 != passwd2">Save</button>
Simple, and works just fine for me.
This solution is similar to the one given by Dominic Watson, which uses $validators and is the one I like best. The only changes are that you can watch an expression.
$validators A collection of validators that are applied whenever the
model value changes. The key value within the object refers to the
name of the validator while the function refers to the validation
operation. The validation operation is provided with the model value
as an argument and must return a true or false value depending on the
response of that validation
from https://code.angularjs.org/1.3.15/docs/api/ng/type/ngModel.NgModelController
I'm using angular 1.3. My directive looks something like this
angular.module('app').directive("passwordConfirm", function() {
"use strict";
return {
require : "ngModel",
restrict : "A",
scope : {
//We will be checking that our input is equals to this expression
passwordConfirm : '&'
},
link : function(scope, element, attrs, ctrl) {
//The actual validation
function passwordConfirmValidator(modelValue, viewValue) {
return modelValue == scope.passwordConfirm();
}
//Register the validaton when this input changes
ctrl.$validators.passwordConfirm = passwordConfirmValidator;
//Also validate when the expression changes
scope.$watch(scope.passwordConfirm, ctrl.$validate);
}
};
});
To use it
<input type="password" ng-model="user.password"/>
<input type="password" ng-model="user.confirmPassword"
password-confirm="user.password" />
In order to validation of form with two input field,i find most suitable way of
Directive
app.directive('passwordVerify', function() {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
if (!attrs.passwordVerify) {
return;
}
scope.$watch(attrs.passwordVerify, function (value) {
if( value === ctrl.$viewValue && value !== undefined) {
ctrl.$setValidity('passwordVerify', true);
ctrl.$setValidity("parse",undefined);
}
else {
ctrl.$setValidity('passwordVerify', false);
}
});
ctrl.$parsers.push(function (value) {
var isValid = value === scope.$eval(attrs.passwordVerify);
ctrl.$setValidity('passwordVerify', isValid);
return isValid ? value : undefined;
});
}
};
});
HTML
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required || (form.password.$error.minlength || form.password.$error.maxlength)}">
<input type="password" name="password" ng-minlength="6" ng-maxlength="16" id="password" class="form-control" placeholder="Password" ng-model="user.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
<span ng-show="form.password.$error.minlength || form.password.$error.maxlength" class="help-block">Password must be 6-16 character long</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-group" ng-class="{ 'has-error': (form.confirm_password.$dirty && form.confirm_password.$error.required) || form.confirm_password.$error.passwordVerify }">
<input type="password" name="confirm_password" id="confirm_password" class="form-control" placeholder="Confirm Password" ng-model="user.confirm_password" required password-verify="user.password" />
<span ng-show="form.confirm_password.$dirty && form.confirm_password.$error.required" class="help-block">Confirm Password is required</span>
<span ng-show="form.confirm_password.$error.passwordVerify" class="help-block">Please make sure passwords match & must be 6-16 character long</span>
</div>
</div>
</div>
This works both ways and it is simple and clean
JavaScript
var app = angular.module("app");
app.controller("SamePaswordController", function () {
this.password;
this.confirm;
this.save = function () {
alert("Saved!");
};
}
app.directive("match", function () {
return {
restrict:"A",
require:"ngModel",
link: function(scope, element, attrs, ctrl) {
function matchValidator(value) {
scope.$watch(attrs.match, function(newValue, oldValue) {
var isValid = value === scope.$eval(attrs.match);
ctrl.$setValidity('match', isValid);
});
return value;
}
ctrl.$parsers.push(matchValidator);
}
};
});
HTML: note the match directive
<form name="regForm" ng-controller="SamePaswordController as regCtrl"
ng-submit="regForm.$valid && regCtrl.save()" novalidate>
<input name="password" ng-model="regCtrl.password"
type="password" required placeholder="Password"/>
<input name="confirm" ng-model="regCtrl.confirm" match="regCtrl.password"
type="password" required placeholder="Confirm password"/>
<div> regForm is valid:{{regForm.$valid}}</div>
<input type="submit" value="Save"/>
</form>
You can clone the repo with this example
https://github.com/rogithub/roangularjs
Not a directive solution but is working for me:
<input ng-model='user.password'
type="password"
name='password'
placeholder='password'
required>
<input ng-model='user.password_verify'
type="password"
name='confirm_password'
placeholder='confirm password'
ng-pattern="getPattern()"
required>
And in the controller:
//Escape the special chars
$scope.getPattern = function(){
return $scope.user.password &&
$scope.user.password.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
}
http://plnkr.co/edit/QDTnipCsHdg56vgygsqC?p=preview
The following is my take on the problem. This directive would compare against a form value instead of the scope.
'use strict';
(function () {
angular.module('....').directive('equals', function ($timeout) {
return {
restrict: 'A',
require: ['^form', 'ngModel'],
scope: false,
link: function ($scope, elem, attrs, controllers) {
var validationKey = 'equals';
var form = controllers[0];
var ngModel = controllers[1];
if (!ngModel) {
return;
}
//run after view has rendered
$timeout(function(){
$scope.$watch(attrs.ngModel, validate);
$scope.$watch(form[attrs.equals], validate);
}, 0);
var validate = function () {
var value1 = ngModel.$viewValue;
var value2 = form[attrs.equals].$viewValue;
var validity = !value1 || !value2 || value1 === value2;
ngModel.$setValidity(validationKey, validity);
form[attrs.equals].$setValidity(validationKey,validity);
};
}
};
});
})();
in the HTML one now refers to the actual form instead of the scoped value:
<form name="myForm">
<input type="text" name="value1" equals="value2">
<input type="text" name="value2" equals="value1">
<div ng-show="myForm.$invalid">The form is invalid!</div>
</form>
In order to achieve validation when both inputs change, I use the following code (which was a combination of all others other answers):
angular.module('app.directives')
.directive('passwordVerify', [function () {
return {
require: '?ngModel',
restrict: 'A',
scope: {
origin: '=passwordVerify'
},
link: function (scope, element, attrs, ctrl) {
if(!ctrl) {
return;
}
function validate(value) {
ctrl.$setValidity('passwordMatch', scope.origin === value);
return value;
}
ctrl.$parsers.unshift(validate);
scope.$watch('origin', function(value) {
validate(ctrl.$viewValue);
});
}
};
}]);
First, I would like to thank Fredric for posting this excellent example. There is one tiny issue that I came across by coincidence. on the Fiddle you posted http://jsfiddle.net/gUSZS/
If you type in a password, and then type in the same password in the verify input element everything works fine, but try to add a space to the second box and angular will automatically trim that space. This means that the directive doesnt "see" the extra space. Now the passwords are different, but the form is still valid.
to fix this we need to add
ng-trim="false"
to the input elements. This doesnt work in angular 1.0.3 so if you want to try it in this fiddle you need to add 1.1.1 to the Fiddle (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.js)
But again, thanx Frederic, I will use your solution in my app!
Anton
P.S. I wanted to comment on Frederic's post, but Im new to this forum and dont seem to have enough credit. So it would be very much appreciated if some of you can up vote my comment if you like it :-)
No need for an extra directive, here's my take on this:
HTML:
<div class="form-group" data-ng-class="{ 'has-error': submitted && !form.new_passwd.$valid }">
<input type="password" name="new_passwd" class="form-control" data-ng-model="data.new_passwd" placeholder="New Password" required data-ng-pattern="passwdRegex">
<small class="help-block" data-ng-show="submitted && form.new_passwd.$error.required">New password is required!</small>
<small class="help-block" data-ng-show="submitted && !form.new_passwd.$error.required && form.new_passwd.$error.pattern">New password is not strong enough!</small>
</div>
<div class="form-group" data-ng-class="{ 'has-error': submitted && !form.new_passwd_conf.$valid }">
<input type="password" name="new_passwd_conf" class="form-control" data-ng-model="data.new_passwd_conf" placeholder="Confirm New Password" required data-ng-pattern="passwdConfRegex">
<small class="help-block" data-ng-show="submitted && form.new_passwd_conf.$error.required">New password confirmation is required!</small>
<small class="help-block" data-ng-show="submitted && !form.new_passwd_conf.$error.required && form.new_passwd_conf.$error.pattern">New password confirmation does not match!</small>
</div>
Javascript:
$scope.passwdRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,}$/;
$scope.$watch('data.new_passwd', function() {
$scope.passwdConfRegex = new RegExp(Regex.escape($scope.data.new_passwd));
});
where Regex.escape() can be found here.
Works like a charm!
To add to the large number of already existing solutions, this works well for me.
(Jan Laussmann answer stopped working with the latest AngularJS beta releases).
directive:
angular.module('myApp').directive('matchValidator', [function() {
return {
require: 'ngModel',
link: function(scope, elm, attr, ctrl) {
var pwdWidget = elm.inheritedData('$formController')[attr.matchValidator];
ctrl.$parsers.push(function(value) {
if (value === pwdWidget.$viewValue) {
ctrl.$setValidity('match', true);
return value;
}
if (value && pwdWidget.$viewValue) {
ctrl.$setValidity('match', false);
}
});
pwdWidget.$parsers.push(function(value) {
if (value && ctrl.$viewValue) {
ctrl.$setValidity('match', value === ctrl.$viewValue);
}
return value;
});
}
};
}])
usage
<input type="email" ng-model="value1" name="email" required>
<input type="email" ng-model="value2" name="emailConfirm" match-validator="email" required>
display error
<div ng-if="[[yourFormName]].emailConfirm.$error">
<div ng-if="[[yourFormName]].emailConfirm.$error.match">
Email addresses don't match.
</div>
</div>
<input name="password" type="text" required="" ng-model="password" placeholder="password" class="ng-dirty ng-valid ng-valid-required">
<input name="confirm_password" type="text" required="" ng-model="confirm_password" ui-validate=" '$value==password' " ui-validate-watch=" 'password' " placeholder="confirm password" class="ng-dirty ng-valid-required ng-invalid ng-invalid-validator">
<span ng-show="form.confirm_password.$error.validator">Passwords do not match!</span>
password errors: {
"required": false,
"validator": true
}
This worked for me.
Directive:
modulename.directive('passwordCheck', function () {
return {
restrict: 'A', // only activate on element attribute
require: '?ngModel', // get a hold of NgModelController
link: function (scope, elem, attrs, ngModel) {
if (!ngModel) return; // do nothing if no ng-model
var Value = null;
// watch own value and re-validate on change
scope.$watch(attrs.ngModel, function (val) {
Value = val;
validate();
});
// observe the other value and re-validate on change
attrs.$observe('passwordCheck', function () {
validate();
});
var validate = function () {
// values
var val1 = Value;
var val2 = attrs.passwordCheck;
// set validity
if (val1 != '' && val1 != undefined) {
ngModel.$setValidity('passwordCheck', val1 == val2);
}
else {
ngModel.$setValidity('passwordCheck', true);
}
};
}
}
});
HTML:
ng-model="confirmpassword.selected" type="password" name="confirmpassword"
password-check="{{password.selected}}"
ng-show="resetpasswordform.confirmpassword.$error.passwordCheck && submitted" Password does not match
I had the same problem when i was trying to build my own directive, and i fixed with this add
ctrl.$validate();
where ctrl is my ngModelController
this is my view
<input type="password" match="signupCtrl.registrationData.password" name="confirmPassword" class="form-control" placeholder="Confirm Password" data-ng-model="signupCtrl.registrationData.confirmPassword" required>
<span ng-messages="registerForm.confirmPassword.$error">
<span ng-message="match">The Password must match</span>
</span>
this is my directive
(function () {
'use strict';
angular.module('matchDirective', [
// Angular modules
// Custom modules
// 3rd Party Modules
]);
})();
(function () {
'use strict';
angular
.module('matchDirective')
.directive('match', match);
match.$inject = ['$window'];
function match($window) {
// Usage:
// <element match="source"></element>
// Creates:
//
var directive = {
link: link,
restrict: 'A',
require: 'ngModel',
};
return directive;
function link(scope, element, attrs, ctrl) {
scope.$watch(attrs['match'], function (newVal, oldVal) {
ctrl.$validators.match = function (modelValue, viewValue) {
if (newVal == modelValue) {
return true;
} else {
return false;
}
}
ctrl.$validate();
});
}
}
})();
Something like this works for me:
js:
.directive('sameAs', function() { return {
require : 'ngModel',
link : function(scope, elm, attrs, ngModelCtrl) {
ngModelCtrl.$validators.sameAs = function(modelValue, viewValue) {
var checkedVal = attrs.sameAs;
var thisInputVal = viewValue;
if (thisInputVal == checkedVal) {
return true; // valid
} else {
return false;
}
};
}
}; });
html:
<input type="password" name="password" id="password" ng-model="password" />
<input type="password" name="passwordRepeat" id="passwordRepeat"
ng-model="passwordRepeat" same-as="{{password}}" />
The Keep It Simple And Stupid(KISS) principle might be useful on this one. Its more faster and easier to check if both passwords match by doing the following:
<div ng-app="app" ng-controller="passwordCheck">
<form name="signUp" ng-submit="submitForm()" novalidate>
<input type="password" name="password" ng-model="password" required>
<input type="password" name="ConfirmPassword" ng-model="passwordconfirm" required>
<button type="submit"> Submit</button>
</form>
<hr>
<span>Do they match?</span> {{signUp.password.$viewValue == signUp.confirmPassword.$viewValue}}
</div>
And Before submitting the form, you can do this in your js
var app = angular.module("app", []);
app.controller("passwordCheck", function($scope) {
$scope.submitForm = function() {
if ($scope.signUp.$valid && $scope.signUp.password.$viewValue == $scope.signUp.confirmPassword.$viewValue) {
alert('Its a match!');
};
};
});
You can test it in JSfiddle as well.
Related
I have a text box in my Application, i am using change-on-blur custom directive to validate that field on tab out that is, if i type ABCD initially in that text box then i delete D character and again i type D character so custom change-on-blur will call only one time.
For some issues i am using ng-model-options="{updateOn: 'blur'}" ng-change="validate(data)" instead ng-blur for that element. So if i type ABCD it will call the function, again i delete and type D character it will call that function again. Is there custom ng-change directive to call only once.
I am struggling with this for last 2 days. Kindly help
Html :
<input type="text" ng-model="data.taxNo" id="taxNo"
ngomitsplchar class="form-control taxNo"
maxlength="15" style="text-transform: uppercase;"
ng-paste="$event.preventDefault();"
ng-model-options="{updateOn: 'blur'}"
ng-change="validate(data)"
tabindex="5" spellcheck="false" autocomplete="nope">
JS:
$scope.validate = function (obj) {
alert("2"); // Prompting alert 2 times when using ng-change
// Prompting alert 1 times when using change-on-blur
}
app.directive('changeOnBlur', function($timeout) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elm, attrs, ngModelCtrl) {
if (attrs.type === 'radio' || attrs.type === 'checkbox')
return;
var expressionToCall = attrs.changeOnBlur;
var oldValue = null;
elm.bind('focus',function() {
//scope.$apply(function() {
oldValue = elm.val();
//});
});
elm.bind('blur', function() {
$timeout(function() {
var newValue = elm.val();
if (newValue !== oldValue){
scope.$eval(expressionToCall);
}
//alert('changed ' + oldValue);
});
});
}
};
});
I have found the solution. Need to change from ng-model-options="{updateOn: 'blur'}" to ng-model-options="{updateOn: '**change blur**'}". So its restricted duplicate call when changing same value in text box by using ng-change="validate(data)"
<input type="text" ng-model="data.taxNo" id="taxNo"
ngomitsplchar class="form-control taxNo"
maxlength="15" style="text-transform: uppercase;"
ng-paste="$event.preventDefault();"
ng-model-options="{updateOn: 'change blur'}"
ng-change="validate(data)"
tabindex="5" spellcheck="false" autocomplete="nope">
I am creating a project using AngularJS and I want to integrate validation in AngularJS. My requirement is that the number should be between the 1-4096 in AngularJS.
Here is my code:
<div class="col-lg-6 col-md-6">
<input type="text" class="form-control" placeholder="VLAN ID" ng-model="exchange.vlanId" valid-number/>
</div>
You should create very simple directive that would allow to validate input in reusable, configurable and declarative way.
You already have valid-number attribute, so the implementation can look like:
angular.module('demo', []).directive('validNumber', [function() {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
if (!ctrl) return;
var range = attrs.validNumber.split(',').map(Number);
ctrl.$validators.validNumber = function(value) {
return value >= range[0] && value <= range[1];
};
}
};
}]);
.error {color: brown;}
<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<div ng-app="demo">
<form name="form">
<input type="text" class="form-control" placeholder="VLAN ID" name="vlanId"
ng-model="exchange.vlanId" valid-number="1,4096" />
</form>
<div class="error" ng-show="form.$dirty && form.vlanId.$error.validNumber">VLAN ID should be in range 1-4096.</div>
</div>
You can bind an event on the input and call a function with passing the model in it:
<input type="text" class="form-control" placeholder="VLAN ID"
ng-model="exchange.vlanId"
ng-keydown="obj.validate(exchange.vlanId)" valid-number/>
Now in the controller you can define a method:
yourApp.controller('theController', ['$scope', function($scope){
$scope.obj = {
validate:function(val){
if(val < 1 || val > 4096){
alert(val+' is out of range');
}
}
};
}]);
And the directive valid-number can also be used:
yourApp.directive('validNumber', function($scope){
return {
restrict:'E',
link:function(scope, el, attrs){
el.on('keydown', function(){
el.css('border', function(){
return scope.exchange.vlanId < 1 || scope.exchange.vlanId > 4096
? "red" : "green";
});
});
}
};
});
I'm trying to validate my text area:
<form id="contact_form" name="contactform" ng-submit="submit(contactform)" role="form">
<textarea class="form-control" id="Message" ng-model="formData.message" ng-trim="false" placeholder="Your message" required="required" rows="8"></textarea>
</form>
For max word count, so I added a filter :
app.filter('wordCounter', function () {
return function (value) {
if (value && typeof value === 'string') {
return value.trim().split(/\s+/).length;
} else {
return 0;
}
};
});
And when this filter is met I print out an error :
<span class="help-block" ng-show="(formData.message|wordCounter) > 200">
Max 200 words please!
</span>
But still when I check in my controller contactform.$valid is always true, how do I make form invalid if the filter wordcounter is more than 200?
You need to create a custom validation directive. With Angular 1.3 $validators it's very easy.
For example, simple one:
.directive('maxWords', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelController) {
ngModelController.$validators.maxWords = function(viewValue, modelValue) {
if (!ngModelController.$isEmpty(modelValue)) {
return modelValue.trim().split(/\s+/).length <= attrs.maxWords;
}
};
}
};
});
Demo: http://jsfiddle.net/m3pp71o4/
The following code applies validation on a text field (time format 00:00:00) correctly.
But I need to validate the input tag after exiting the field, at the moment it validate when a user is typing.
Any idea how to solve this?
<label for="operativeToTime">Operative to time</label>
<input name="operativeToTime"
ng-model="deviceDetails.operativeToTime"
type="text"
ng-pattern="/^(?:2[0-3]|[01][0-9]):[0-5][0-9]:[0-5][0-9]$/"
ng-required="true">
<div class="error-container" ng-show="editDeviceForm.operativeToTime.$invalid">
<span class="error" ng-show="editDeviceForm.operativeToTime.$error.required">Operative to time is required</span>
<span class="error" ng-show="editDeviceForm.operativeToTime.$invalid">+++++++++++++Wrong format</span>
</div>
What you want is ng-blur, which comes built in: https://docs.angularjs.org/api/ng/directive/ngBlur
<label for="operativeToTime">Operative to time
<input name="operativeToTime"
ng-model="deviceDetails.operativeToTime"
type="text"
ng-required="true"
ng-blur="validateInput(this)"/>
<div class="error-container" ng-show="editDeviceForm.operativeToTime.$invalid">
<span class="error" ng-repeat="error in errors" ng-bind="error"></span>
</div>
Update - added JS according to request from OP:
You would need something on these lines to bind the error(s) to your span:
$scope.errors = [];
$scope.validateInput = function(element){
var validate1 = //your logic for validation here
if(!validate1){$scope.errors.push("Error message 1");}
var validate2 = //your logic for validation here
if(!validate2){$scope.errors.push("Error message 2");}
};
I solved it using a different approach, a custom directive. As I had to keep a DRY approach here my code;
app.directive('checkTimeOnBlur', function () {
var EMAIL_REGX = /^(?:2[0-3]|[01][0-9]):[0-5][0-9]:[0-5][0-9]$/;
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elm, attr, ctrl) {
if (attr.type === 'radio' || attr.type === 'checkbox') return;
elm.unbind('input').unbind('keydown').unbind('change');
elm.bind('blur', function () {
scope.$apply(function () {
if (EMAIL_REGX.test(elm.val())) {
ctrl.$setValidity('time', true);
} else {
ctrl.$setValidity('time', false);
}
});
});
}
};
});
in the view:
<input type="text" name="time" ng-model="user.time" check-time-on-blur>
<span ng-show="editDeviceForm.time.$error.time" class="help-inline">Invalid time!!!</span>
Solution inspirited by this plnkr http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview
Simple focus is not working in angular
<div class="search pull-right tab-{{ showDetails2 }}" data-ng-click="showDetails2 = !showDetails2; showDetails = false; showDetails1 = false;searchFocus();">
html
<input type="text" data-ng-model="model.fedSearchTerm"
placeholder="New Search" required class="span12 fedsearch-box" />
MY function
$scope.searchFocus = function() {
$('.fedsearch-box').focus();
};
I encountered the same issue. Solved it by enclosing the focus command inside $timeout. Make sure you pass the $timeout parameter in the .controller function.
$timeout(function() { $('.fedsearch-box').focus(); });
Here is a more robust implementation that works very well :
myApp.directive('focusMe', function () {
return {
link: function(scope, element, attrs) {
scope.$watch(attrs.focusMe, function(value) {
if(value === true) {
element[0].focus();
element[0].select();
}
});
}
};
});
<input type="text" ng-model="stuff.name" focus-me="true" />
You could write a directive for this purpose like;
myApp.directive('focus', function () {
return function (scope, element, attrs) {
element.focus();
}
});
And in your HTML;
<input type="text" data-ng-model="model.fedSearchTerm"
placeholder="New Search" required focus />