angularjs - cloak - ng-required angular 4

Evitar que la entrada se configure desde $ dirty angularjs

Question

Tengo un formulario ng en una página. Dentro del formulario tengo varios controles que necesitan mostrar un cuadro de diálogo de guardado cuando el formulario está sucio, es decir, forma. $ Dirty = true. Sin embargo, hay algunos controles de navegación en el formulario que no quiero ensuciar el formulario. Supongamos que no puedo mover el control fuera del formulario.

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

¿Cómo hago para que el cuadro de selección no ensucie el formulario?

Answer 1

Angular solo establece la forma sucia si el control es prístino. Así que el truco aquí es establecer $ pristine en el control en falso. Puedes hacerlo en un timeout en el controlador.

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

Answer 2

Aquí hay una versión de la respuesta de @acacia usando una directiva y no usando $ timeout. Esto mantendrá sus controladores más limpios.

.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;
    }
  }
});

Entonces utilízalo en tu forma así:

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

Answer 3

Esta es mi respuesta final. Básicamente angular llama internamente a la función $setDirty() del NgModelController cuando interactúa con la entrada, ¡así que simplemente anula eso!

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

Answer 4

Establecer la propiedad $ pristine en falso, solo al inicializar, funciona hasta que llame a $ setPristine () en el formulario. Entonces su control tiene su $ pristine de nuevo a verdadero y cambiar el valor de la entrada haría que su formulario se ensucie. Para evitar eso, establezca el $ pristine en foco:

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

Answer 5

Me encontré con algunos problemas con esa implementación, así que aquí está el mío (más complejo):

app.directive(''noDirtyCheck'', [function () {
        // Interacting with input elements having this directive won''t cause the
        // form to be marked dirty.
        // http://.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();
                    }
                });
            }
        };
    }]);

Answer 6

Una variación en la respuesta de @ overthink con alguna validación adicional, y una notación de corchetes en línea para proteger contra la reducción mínima.

"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;
            }
        }
    };
}]);

Answer 7

Utilicé la solución de @ overthink, pero encontré el problema mencionado por @dmitankin. Sin embargo, no quería adjuntar un controlador al evento de enfoque. Así que en lugar de eso, me esforcé por anular la propiedad $ pristine en sí misma y forzarla a devolver falsa siempre. Terminé usando Object.defineProperty que no es compatible con IE8 y anteriores. Hay workarounds para hacer esto en esos navegadores heredados, pero no los necesitaba, por lo que no son parte de mi solución a continuación:

(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);
            }
        };
    }
})();

También estoy anulando $ sucio por lo que tampoco se puede establecer como sucio.