Angularjs is running my forms through the FormController (eg tracking pristine, dirty, etc). I don't need this functionality; I'm sure it's adding overhead to my $digests.
How can I shut it off?
AFAIK there is no simple switch to turn off AngularJS validation. Actually most of the validation happens in the NgModelController and input directives - basically code in the input.js file. So, to get rid of the built-in validation you would have to re-develop code from this file (plus some others, like select).
Did you identify validation code as a performance bottleneck in your application?
UPDATE : This does NOT work ... well at least not in a way you'd like it to. Adding ng-non-bindable to the form or any input breaks ALL binding. So, your ng-model in the inputs won't work anymore. Sorry ....
ng-non-bindable is the solution to this problem.
It will prevent AngularJS from seeing the form as a directive. This will make AngularJS ignore the entire form:
<form name="inviteContactForm" ng-non-bindable>
This will make AngularJS ignore one part of a form:
<input type="email" name="email" ng-non-bindable>
You can read a bit about my whining on this issue here. http://calendee.com/preventing-angularjs-from-hijacking-forms/
Internally Angular creates factories out of directives by adding the Directive suffix to the directive name. So you can replace the validation and input directive factories with no-operational ones.
var noopDirective = function() { return function () {}; };
angular.module('myModule')
.factory('requiredDirective', noopDirective)
.factory('ngRequiredDirective', noopDirective)
.factory('inputDirective', noopDirective)
.factory('textareaDirective', noopDirective); // etc...
Similar to previous answer from #Chui Tey, having a directive that requires 'ngModel'. This is what I did
for disabling validations in runtime:
//disabling all validators
forEach(ngModelController.$validators, function(validator, validatorName){
ngModelController.$setValidity(validatorName, true);//mark invalid as valid
var originalValidator = ngModelController.$validators[validatorName]; //we save the original validator for being able to restore it in future
ngModelController.$validators[validatorName] = _.wrap(true);//overwrite the validator
ngModelController.$validators[validatorName].originalValidator = originalValidator;
});
//for restoring validations
forEach(ngModelController.$validators, function(validator, validatorName){
if(ngModelController.$validators[validatorName].originalValidator){
ngModelController.$validators[validatorName] = ngModelController.$validators[validatorName].originalValidator;
}
});
ngModelController.$validate(); //triger validations
A colleague suggested a nifty way of disabling validators. Here's an implementation:
<input type="radio" name="enableValidation" ng-model="$ctrl.validationEnabled" ng-value="true" />Enabled
<input type="radio" name="enableValidation" ng-model="$ctrl.validationEnabled" ng-value="false" />Disabled
<input type="number"
name="age"
ng-model="$ctrl.age"
min="20"
disable-validation="!$ctrl.validationEnabled" />
When disable-validation is true, then all validation rules automatically passes.
function disableValidation(scope, elem, attrs, ngModelController) {
function wrapOriginalValidators() {
var originalValidators = angular.copy(ngModelController.$validators);
Object.keys(originalValidators).forEach(function(key) {
ngModelController.$validators[key] = function(modelValue, viewValue) {
return scope.$eval(attrs.disableValidation) || originalValidators[key](modelValue, viewValue);
}
});
}
function watchDisableCriteria() {
scope.$watch(attrs.disableValidation, function() {
// trigger validation
var originalViewValue = ngModelController.$viewValue;
scope.$applyAsync(function() {
ngModelController.$setViewValue('');
});
scope.$applyAsync(function() {
ngModelController.$setViewValue(originalViewValue);
});
});
}
wrapOriginalValidators();
watchDisableCriteria();
}
angular.module('app', [])
.directive('disableValidation', function() {
return {
require: 'ngModel',
link: disableValidation
};
});
Obviously, you'd not use this for performance reasons, but when you
need to dynamically enable or disable validations.
Sample: https://plnkr.co/edit/EM1tGb
Related
How can I pass the value of an <input type='email'> using angularjs. I need to validate the email address on the input of my form and need to generate a key with this. The only thing I need to know is how should I get the value from the input.
angular.module('myApp', [])
.controller('EmailController', function($scope) {
$scope.hash = "";
$scope.generateKey = function () {
var resultKey = $scope.email;
// TODO: generate key
// Assing value to hash
$scope.hash = resultKey;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="EmailController">
<form>
<p>Email: <input type="email" ng-model="email" ng-keyup="generateKey()"></p>
<p><b>Hash: </b>{{hash}}</p>
</form>
</div>
Edit 1
I could use <input type='text'> and validate with a regex but I want to use type='email' as in the cellphone display more options on the keyboard. Does exist a way to get the input value using angular even if it isn't a valid email?
Use ng-model-options="{ allowInvalid: true }" if you want invalid email addresses to be bound to your controller:
<input type="email" ng-model="email" ng-keyup="generateKey()" ng-model-options="{ allowInvalid: true }">
Edit: You usually shouldn't data-bind to a primitive because prototypal inheritance can sometimes lead to binding to the wrong scope. Try binding to an object instead, like data.email.
Edit: Live example
The way angular handles input values and validations is via $parsers. you can intercept the default parsers and therefore get the value before it get to the email validation. Created this little snippet to further illustrate my point. Notice that I am not using .push to add my parser but instead I am using .unshift. I use unshift rather than push because I want to make sure my parser is the first on the list. or at least, the first at the moment i added to the list. This will guarantee that it runs before the default parsers which are already in the list by the time my code runs.
var app = angular.module('myApp', []);
app.controller('EmailController', function($scope) {
$scope.hash = "";
});
app.directive('generateKey', function(){
return {
require: ['ngModel'],
link: function(scope, element, attr, ctrls){
var ngModel = ctrls[0];
ngModel.$parsers.unshift(function(text){
scope.hash = text;
return text;
});
}
};
});
for a complete snippet, please visit: https://jsbin.com/vabofapigo/edit?html,js,output
I’m quite new to Angular but I love it already!
I need to write a couple of reusable components for a wizard.
I would like to handle the submit event from the form in the directive as well, is this possible?
<form ng-submit="submit()" name="exampleForm">
<foo data="someData"></foo> <!-- I need to handle the submit event in directive as well-->
<input type="submit" id="submit" value="Submit"/>
</form>
If the user presses enter or clicks the button on the form the directive has to make a call to the backend and double check the data.
If the check is successful the form will be valid.
I built a simple example here
Thanks in advance!
Stefan
Yes it's possible.
The first issue is targeting the correct $scope. Right now your code targets the submit() function on the controller. The <form> can't see the $scope of the directive due to how the html elements are nested.
Since you want to submit() from the directive, then the directive template should also include the <form> element and the submit input button.
Invoking foo will look like this:
<foo data="someData" name="exampleForm"></foo>
If you would rather keep foo the way it is (and that's a totally legit way to go about it) then you'll need a new directive with the submit() function. So you'd have 2 directives working together (Very angular! Many wow!).
What you will want here is a custom directive for form validation. Custom form validators are added to the $validators object on the ngModelController.
For a simple example for an "integer" directive (found in the Angular docs here under "Custom Validation"), the directive would be defined like this:
var INTEGER_REGEXP = /^\-?\d+$/;
app.directive('integer', function() { return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.integer = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) {
// consider empty models to be valid
return true;
}
if (INTEGER_REGEXP.test(viewValue)) {
// it is valid
return true;
}
// it is invalid
return false;
};
} }; });
And it would be used in the form like this:
<form name="form" class="css-form" novalidate>
<input type="number" ng-model="size" name="size" min="0" max="10" integer />{{size}}<br />
</form>
There is also an option for asynchronous validation, adding the validator to the $asyncValidatorsobject. More info is found at the link mentioned above. The working example using both is found here
Here's a working example:
http://plnkr.co/edit/sckCOq3a50PBjat2uixk?p=preview
I've created another 2-way binding on the directive's scope (called "submit"), so you can specify the name of the submit function as it will be seen from ExampleController's scope (I used "directiveSubmit" here).
scope: {
data: '=',
submit: '='
},
.
<foo data="someData" submit="directiveSubmit"></foo>
The directive's controller then creates that function and assigns it to its own scope, and that also assigns it to ExampleController's scope via the magic of 2-way binding.
Next you can run that submit function from ExampleController's scope and it will actually be referring to the newly created function in the directive.
<form ng-submit="directiveSubmit(exampleForm)" name="exampleForm" novalidate>
Notice that I'm also passing the exampleForm into that function. Without that the directive will have a hard time getting access to it.
Finally, I've also added novalidate to the form because if you don't do that some browsers (i.e. Chrome) will handle form validation in a way that may (or may not) be undesirable. In Chrome try removing that and submitting, then you'll see what I mean (I also made the "name" field required).
I have a massive form with more or less 80 / 90 inputs.
My main problem is How can I pass all those inputs belonging to unique form in an ajax request without map the inputs manually into a object?
I know that with jquery you can use serialize() function selecting the form. Is there any helper function in angular to achieve that?
Thanks
Indeed, as Michal's comment suggested, it doesn't look like you are using ng-model.
Angular's jqLite doesn't support serialize() since with Angular one would typically build a ViewModel that would then be bound to a form.
But, if you are out of luck, you could add jQuery.js to get the serialize() support and create a simple directive - serializer - that would act on a form.
app.directive("serializer", function(){
return {
restrict: "A",
scope: {
onSubmit: "&serializer"
},
link: function(scope, element){
// assuming for brevity that directive is defined on <form>
var form = element;
form.submit(function(event){
event.preventDefault();
var serializedData = form.serialize();
scope.onSubmit({data: serializedData});
});
}
};
});
And use it as follows:
<form serializer="submit(data)">
<input name="foo">
<input name="bar">
<button type="submit">save</button>
</form>
And in the controller:
$scope.submit = function(data){
console.log(data);
}
plunker
EDIT:
If you are using ng-model and in fact have a proper ViewModel, then this is the "Angular way" and so, you should have some object that is bound to the form inputs - you should just submit that.
<form name="foo" ng-submit="onSubmit()">
<input ng-model="fooObject.a">
<input ng-model="fooObject.b">
...
</form>
$scope.fooObject = {};
$scope.onSubmit = function(){
$http.post("url/to/server", {data: $scope.fooObject})
.success(...);
}
I created this code:
<input class="inputField"
id="registerUserName"
name="registerUserName"
ng-model="aus.registerUserName"
ng-model.$asyncvalidators.unique="aus.isUsernameAvailable";
ng-model-options="{ debounce: 2000 }"
ng-minlength="5"
ng-required="true"
placeholder="Username"
type="text"
value="" />
isUsernameAvailable = function {
return true;
}
But it seems my validator is not getting called. All the examples I see create a directive for the asyncvalidators. Is it possible to do it without creating a directive like I tried?
Yes, you do have to create a directive. The code example that you have shown is sort of attempting to use html in javascript.
You need to access the ng-model controller on the element that you want to validate, which (as far as I know) you can only do by creating another directive and using require in the directive definition object.
You could also make a directive that accepts an expression to add to the asyncvalidators a bit like what you are doing there.
It would look something like this: (not tested, probably not working code!)
angular.module('app', [])
.directive('useAsyncValidators', function (){
return {
restrict: 'A',
// you need this line to access ngModel controller (4th arg to link)
require: 'ngModel',
link: function (scope, element, attributes, ngModel) {
// assume we pass an object with validatorname: validatorFunction fields.
validators = scope.$eval( attributes.useAsyncValidators );
for(var validator in validators) {
// check the validator is a function
if typeof validators[validator] === "function"
// set validator on ngModelController
ngModel.$asyncValidators[validator] = validators[validator];
}
}
}
// Which you could then use with the following:
.controller('validateTestController', function ($scope, $timeout) {
delayedValidator = function () {
return $timeout(true, 1000);
};
alwaysTrue = function () {
return true;
};
$scope.validators = {
isNameAvailable: alwaysTrue,
isEmailAvailable: delayedValidator
}
});
Then use the following markup:
<form ng-controller="validateTestController">
<input class="inputField"
ng-model="whatever"
use-async-validators="validators" />
</form>
etc.
This would result in validating the field with a validator called isNameAvailable using the alwaysTrue function, and another on the same field with isEmailAvailable using delayedValidator.
Obivously these validator functions don't make sense really, but hopefully you can see that it's only a few lines of code to make a generic directive that does what you're trying to do in your markup.
I have the following piece of html/angular
<input type="email" data-ng-model="myEmailVar" />
{{ myEmailVar }}
Now the problem is angular has an auto-validator for emails that won't set myEmailVar unless it passes correctly. So for instance if I enter "name" myEmailVar will not be set. You can see it here: http://jsfiddle.net/bFVsW/ (enter the word test, then enter test#test.test)
Now, I want to run my own validation, but also support mobile. If I use type="email" some mobile browsers switch the keyboard layout to make inputting an address easier (such as the # symbol). So I can't switch it to type="text". What i'd like to do is override the angular email validator or just turn it off completely as I'll be handling my own validation. Is that possible?
On HTML5 you can use the form's attribute novalidate to disable browser's validation:
<form novalidate>
<input type="email"/>
</form>
Or you can use type="text"
For any body who is still searching for an answer, I found the answer in this stack overflow answer: How to disable angulars type=email validation?
Essentially you can add your own custom directive that disables the default angular validators.
angular.module('app').directive('disableValidators', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl){
var validator = function(value){
return value;
};
// replace other validators with our own
ctrl.$parsers = [validator];
ctrl.$formatters = [validator];
}
}
});
Another answer in that same thread presents a more detailed answer: How to disable angulars type=email validation?
Edit: This solution worked for me in the past, but no longer worked when I upgrade from angular 1.2.X to 1.3.X. It works, however, with a few minor tweaks:
angular.module('app').directive('disableValidators', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
var validator = function(value) {
return value;
};
// replace the email validators
ctrl.$validators = {email: validator};
}
}
});
UPDATE : This does NOT work ... well at least not in a way you'd like it to. Adding ng-non-bindable to the form or any input breaks ALL binding. So, your ng-model in the inputs won't work anymore. Sorry ....
ng-non-bindable is the answer to this problem. See my answer here:
https://stackoverflow.com/a/19387233/75644
Simple solution: init field with type 'text' and change type to 'email' by timeout. In this case angularjs won't add email validator and you will have the email keyboard.
<input type="{{type}}" />
$scope.type = 'text';
$timeout(function() {
$scope.type = 'email';
});
http://jsfiddle.net/44pc5j8L/