Sharing Top Content from the Angular-sphere.

[SOLVED] Disabling form validation- Angular.js Recipes

  • Actually most of the validation happens in the 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).
  • Adding ng-non-bindable to the form or any input breaks ALL binding.
  • It will prevent AngularJS from seeing the form as a directive.
  • So you can replace the validation and input directive factories with no-operational ones.

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?


@angular_recipe: Disabling form validation #Angular #AngularJS

How can I shut it off?

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:

This will make AngularJS ignore one part of a form:

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:

A colleague suggested a nifty way of disabling validators. Here’s an implementation:

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

Angular.js Recipes are structured in a Cookbook format featuring recipes that contain problem statements and solutions. A detailed explanation follows each problem statement of the recipe. This is usually contained within the solution; however, an optional discussion section can often contain other useful information helping to demonstrate how the solution works.

Angular.js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Lost? Begin by working through Angular’s Getting Started Guide to get yourself up-and-running.

[SOLVED] Disabling form validation- Angular.js Recipes

Comments are closed, but trackbacks and pingbacks are open.