Verhindern-Eingang aus Einstellung der form $dirty angularjs

Habe ich eine ng-Formular auf einer Seite. Im Formular habe ich mehrere Steuerelemente, die dem Benutzer einen speichern-dialog, wenn das Formular dirty, ie-form.$dirty = true. Es gibt jedoch einige Steuerelemente für die navigation in der form will ich nicht schmutzig das Formular. Nehme an, ich kann nicht verschieben Sie das Steuerelement aus dem Formular.

finden Sie unter: http://plnkr.co/edit/bfig4B

Wie mache ich die select-box nicht schmutzig das Formular?

InformationsquelleAutor der Frage acacia | 2013-06-13

  1. 25

    Hier eine version von @acacia Antwort mit einer Richtlinie und nicht mit $timeout. Dies wird halten Sie Ihre Controller-Reiniger.

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

    Dann verwenden Sie es in Ihrer form in etwa so:

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

    InformationsquelleAutor der Antwort overthink

  2. 12

    Einstellung $unberührte Eigenschaft auf false, wird nur bei der Initialisierung, funktioniert, bis Sie rufen Sie $setPristine() auf das Formular. Dann ist dein regler hat seine $unberührten true zurück, und das ändern des input-Wert machen würde, Ihre form schmutzig.
    Um das zu vermeiden, setzen Sie die $unberührten im Fokus:

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

    InformationsquelleAutor der Antwort Delian Mitankin

  3. 12

    Ich verwendet @overthink die Lösung, sondern lief in das problem erwähnt von @dmitankin. Ich bin jedoch nicht möchten, fügen Sie einen Ereignishandler für das focus-Ereignis. Also stattdessen ich versuchte, das überschreiben der $unberührten Eigentum selbst und die Kraft es zu false immer. Ich landete mit dem Objekt.defineProperty nicht unterstützt wird in IE8 und unten. Es gibt Problemumgehungen um dies zu tun, in denen ältere Browser, aber ich didn ' T brauchen Sie, Sie sind also nicht Teil meiner Lösung unten:

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

    Ich bin auch überschreiben $schmutzig, so kann es nicht als schmutzig.

    InformationsquelleAutor der Antwort Kasey Speakman

  4. 7

    Winkel stellt nur die form verschmutzt wenn die Steuerung ist makellos. Also der trick hier ist, um $unberührten auf das Steuerelement auf false. Sie können es in einem timeout in der Steuerung.

    finden Sie unter: http://plnkr.co/edit/by3qTM

    InformationsquelleAutor der Antwort acacia

  5. 1

    Dies ist meine Letzte Antwort. Im Grunde eckig ruft intern die $setDirty() Funktion der NgModelControllerwenn die Eingabe interagiert mit, also einfach überschreiben!

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

    InformationsquelleAutor der Antwort Daniele Repici

  6. 0

    Variation auf @overthink Antwort mit einigen zusätzlichen Validierung und inline-Klammer-notation zum Schutz gegen die Verkleinerung.

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

    InformationsquelleAutor der Antwort Morgan Polotan

Schreibe einen Kommentar