Prevent input from setting form $dirty angularjs

Question

I have an ng form on a page. Inside the form I have several controls which need to display a save dialog when the form is dirty, ie form.$dirty = true. However there are some navigation controls in the form I don't want to dirty the form. Assume I can't move the control out of the form.

see: http://plnkr.co/edit/bfig4B

How do I make the select box not dirty the form?

score 29 · Answer 1 · answered May 12 '14 at 20:54

Here's a version of @acacia's answer using a directive and not using $timeout. This will keep your controllers cleaner.

.directive('noDirtyCheck', function() {
  // Interacting with input elements having this directive won't cause the
  // form to be marked dirty.
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$pristine = false;
    }
  }
});

Then use it in your form like so:

<input type="text" name="foo" ng-model="x.foo" no-dirty-check>

This is a great implementation, but suffers from the problem @dmitankin mentioned with form.$setPristine(). — Kasey Speakman, Dec 11 '14 at 17:39

score 14 · Answer 2 · answered Dec 11 '14 at 19:36

I used @overthink's solution, but ran into the problem mentioned by @dmitankin. However, I didn't want to attach a handler to the focus event. So instead, I endeavored to override the $pristine property itself and force it to return false always. I ended up using Object.defineProperty which is not supported in IE8 and below. There are workarounds to do this in those legacy browsers, but I didn't need them, so they are not part of my solution below:

(function () {
    angular
        .module("myapp")
        .directive("noDirtyCheck", noDirtyCheck);

    function noDirtyCheck() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, elem, attrs, ctrl) {
                var alwaysFalse = {
                    get: function () { return false; },
                    set: function () { }
                };
                Object.defineProperty(ctrl, '$pristine', alwaysFalse);
                Object.defineProperty(ctrl, '$dirty', alwaysFalse);
            }
        };
    }
})();

I am also overriding $dirty so it can't be set as dirty either.

The only solution that worked reliably when using `form.$setPristine()` at some point. — Alex Ilyaev, Aug 08 '16 at 15:52

score 13 · Answer 3 · answered Jul 23 '14 at 13:29

Setting the $pristine property to false, only when initializing, works until you call $setPristine() on the form. Then your control has its $pristine back to true and changing the input's value would make your form dirty. To avoid that, set the $pristine on focus:

link: function(scope, elm, attrs, ctrl) {
    elm.focus(function () {
        ctrl.$pristine = false;
    });
}

score 8 · Accepted Answer · answered Jun 20 '13 at 14:51

8

Angular only sets the form dirty if the control is pristine. So the trick here is to set $pristine on the control to false. You can do it in a timeout in the controller.

see: http://plnkr.co/edit/by3qTM

answered Jun 20 '13 at 14:51

acacia

303
1
2
8

When i press space in the text box the form does not become dirty, – Trilok Pathak Jan 17 '17 at 11:47

score 1 · Answer 5 · answered Oct 04 '17 at 10:24

This is my final answer. Basically angular internally calls the $setDirty() function of the NgModelController when the input is interacted with, so just override that!

app.directive('noDirtyCheck', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: postLink
  };
  function postLink(scope, iElem, iAttrs, ngModelCtrl) {
    ngModelCtrl.$setDirty = angular.noop;
  }
})

score 0 · Answer 6 · answered Mar 12 '15 at 21:17

A variation on @overthink's answer with some additional validation, and inline bracket notation to protect against minification.

"use strict";

angular.module("lantern").directive("noDirtyCheck", [function () {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, elem, attrs, ngModelCtrl) {
            if (!ngModelCtrl) {
                return;
            }

            var clean = (ngModelCtrl.$pristine && !ngModelCtrl.$dirty);

            if (clean) {
                ngModelCtrl.$pristine = false;
                ngModelCtrl.$dirty = true;
            }
        }
    };
}]);

score 0 · Answer 7 · answered Apr 01 '15 at 22:05

I ran into some problems with that implementation, so here is mine (more complex):

app.directive('noDirtyCheck', [function () {
        // Interacting with input elements having this directive won't cause the
        // form to be marked dirty.
        // http://stackoverflow.com/questions/17089090/prevent-input-from-setting-form-dirty-angularjs
        return {
            restrict: 'A',           
            require: ['^form', '^ngModel'],

            link: function (scope, element, attrs, controllers) {
                var form = controllers[0];
                
                var currentControl = controllers[1];

                var formDirtyState = false;

                var manualFocus = false;

                element.bind('focus',function () {
                    manualFocus = true;
                    if (form) {                        
                        window.console && console.log('Saving current form ' + form.$name + ' dirty status: ' + form.$dirty);
                        formDirtyState = form.$dirty; // save form's dirty state
                    }
                 });
                
                element.bind('blur', function () {
                    if (currentControl) {
                        window.console && console.log('Resetting current control (' + currentControl.$name + ') dirty status to false (called from blur)');
                        currentControl.$dirty = false; // Remove dirty state but keep the value
                        if (!formDirtyState && form && manualFocus) {
                            window.console && console.log('Resetting ' + form.$name + ' form pristine state...');
                            form.$setPristine();
                        }
                        manualFocus = false;
                        //          scope.$apply();
                    }
                });
            }
        };
    }]);

Who's implementation did you have problems with, and what problems where they? — Adrian Schmidt, Sep 02 '16 at 11:34

Prevent input from setting form $dirty angularjs

7 Answers7

Linked