Disabling form validation

Question

Angularjs is running my forms through the FormController (eg tracking pristine, dirty, etc). I don\'t need this functionality; I\'m sure it\'s add

Answer 1

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/

Answer 2

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

Answer 3

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

Answer 4

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...

Answer 5

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?