Enable/disable validation for angular form with nested subforms using `ng-form`

Question

I need to enable/disable all validation rules in Angular form or subform under ng-form="myForm" based on a scope variable $scope.isValidationRequired. So, if isValidationRequired is false, none of the validations set for the designated group of fields will run, and the result will always be myForm.$valid==true, otherwise, the validation rules will run as usual.

I did a lot of research, and realized that this feature is not available out of the box with Angular. However, I found some add-ons or with some customization, it is possible.

For example, I can use the add-on angular-conditional-validation (github and demo) with custom directive enable-validation="isValidationRequired". This will be perfect, except that I cannot apply this feature for a group of fields under ng-form. I have to add this directive for each and every field where applicable.

The other solution is to use custom validation using Angular $validators pipeline. This requires some extra effort and I don't have time since the sprint is almost over and I have to give some results in a few days.

If you have any other suggestions please post an answer.

Use Case:

To clarify the need for this, I will mention the use-case. The end user can fill the form with invalid data and he can click Save button and in this case, the validation rules shouldn't be triggered. Only when the user clicks Validate and Save then the validation rules should be fired.

Solution:

See the final plunker code here.

UPDATE: as per comments below, the solution will cause the browser to hang if inner subforms are used under ng-form. More effort is needed to debug and resolver this issuer. If only one level is used, then it works fine.

UPDATE: The plunker here was updated with a more general solution. Now the code will work with a form that has sub-forms under ng-form. The function setAllInputsDirty() checks if the object is a $$parentForm to stop recursion. Also, the changeValidity() will check if the object is a form using $addControl then it will call itself to validate its child objects. So far, this function works fine, but it needs a bit of additional optimization.

Answer 1

One idea is to reset the errors in the digest loop if the validation flag is disabled. You can iterate through the form errors on change and set them to valid, one by one.

$scope.$watch(function() {
    $scope.changeValidity();
}, true);

$scope.changeValidity = function() {
    if ($scope.isValidationRequired === "false") {
        for (var error in $scope.form.$error) {
            while ($scope.form.$error[error]) {
                $scope.form.$error[error][0].$setValidity(error, true);
            }
        }
    }
}

Here is a plunkr: https://plnkr.co/edit/fH4vGVPa1MwljPFknYHZ

Answer 2

This is the updated answer that will prevent infinite loop and infinite recursion. Also, the code depends on a known root form which can be tweaked a bit to make it more general.

References: Pixelastic blog and Larry's answer
Plunker: https://plnkr.co/edit/ycPmYDSg6da10KdoNCiM?p=preview
UPDATE: code improvements to make it work for multiple errors for each field in each subform, and loop to ensure the errors are cleared on the subform level

var app = angular.module('plunker', []);
app.controller('MainCtrl', ["$scope", function($scope) {
  $scope.isValidationRequired = true;
    var rootForm = "form";
    function setAllInputsDirty(scope) {
        angular.forEach(scope, function(value, key) {
            // We skip non-form and non-inputs
            if (!value || value.$dirty === undefined) {
                return;
            }
            // Recursively applying same method on all forms included in the form except the parent form
            if (value.$addControl && key !== "$$parentForm") {
                return setAllInputsDirty(value);
            }
            if (value.$validate){
                value.$validate();
            }
            // Setting inputs to $dirty, but re-applying its content in itself
            if (value.$setViewValue) {
                //debugger;
                return value.$setViewValue(value.$viewValue);
            }
        });
    }

  $scope.$watch(function() {
    $scope.changeValidity();
}, true);

    $scope.changeValidity = function(theForm) {
        debugger;
        //This will check if validation is truned off, it will 
        // clear all validation errors
        if (!theForm) {
          theForm = $scope[rootForm];
        }
        if ($scope.isValidationRequired === "false") {
            for (var error in theForm.$error) {
                errTypeArr = theForm.$error[error];
                angular.forEach (errTypeArr, function(value, idx) {
                    var theObjName = value.$name;
                    var theObj = value;
                    if (theObj.$addControl) {
                        //This is a subform, so call the function recursively for each of the children
                        var isValid=false;
                        while (!isValid) {
                            $scope.changeValidity(theObj);
                            isValid = theObj.$valid;
                        }
                    } else {
                      while (theObj.$error[error]) {
                          theObj.$setValidity(error, true);
                      }
                    }
                })
            }
        } else {
            setAllInputsDirty($scope);
        }
    }

}]);