Warum bildet sich Angular JS? $ Pristine ändert sich nicht mit direkter JS-Manipulation

Question

Ich möchte die Anzeige von Formularelementen wie dem aktivierten/deaktivierten Attribut einer Schaltfläche anpassen, indem ich die Einstellung von Angular JS pristine teste. Wenn ein Klickereignis ausgelöst wird, wird der ursprüngliche Wert des Formulars wie erwartet geändert, aber wenn ich die Bereichsvariable direkt verarbeite, wird die ursprüngliche Einstellung des Formulars nicht geändert, obwohl ein Steuerelement im Formular an diese Variable gebunden ist.

Bitte beachten Sie die folgenden JSfiddle:

http://jsfiddle.net/nicholasporter/2h7wT/3/

ich, dass das Ändern des Booleschen Wertes erwartet die Formen pristine Einstellung zu ändern verursachen würde, wenn eine Steuerung an einen Umfang Variable gebunden ist. Gibt es einen besseren Weg, das zu testen? Gibt es eine bessere Möglichkeit, Schaltflächen oder andere DOM-Elemente anzupassen, wenn sich im Formular nichts geändert hat? Vielen Dank im Voraus für alle Hinweise. Hier ist der Code für den Fall, dass die JSfiddle nicht funktioniert.

<div ng-app ng-controller="MyCtrl"> 
    <form novalidate name="myForm"> 
    {{myBool}} 

     <input type="checkbox" ng-model="myBool" /> 
     <button ng-click="myBool=!myBool">JS set</button> 
     <div>Form Pristine:{{myForm.$pristine}}</div> 
    </form> 
    </div> 


<script> 
    function MyCtrl($scope){ 
     $scope.myBool = false; 
    } 
</script> 

Answer 1

Die $pristine propery eines einem Eingang mit einer ng-model Richtlinie ändert sich nur, wenn seine ngModelControllers $setViewValue() Verfahren verwendet wird, das heißt durch die Interaktion Benutzer auf das Eingangselement oder durch sich selbst, die Methode aufrufen.

Dies ist, weil der ursprüngliche Zustand verwendet wird, um zu verfolgen, ob Sie das Formular geändert haben (alle ng-model -aktivierten Eingabeelemente wurden geändert). Es bedeutet nicht, dass die Werte in den Eingängen den Werten im Modell entsprechen, sie werden immer nach jedem Tastendruck aktualisiert! Es gibt keine automatische Methode zum Zurücksetzen eines Formulars auf "makellos". Sie müssen selbst entscheiden, wann Sie dies tun möchten, indem Sie form.$setPristine() anrufen.

Wenn Sie die ursprünglichen Informationen in Ihrem Beispiel zurücksetzen wollen, müssen Sie das Formular sagen, selbst über den Umfang auf eine Funktion durch Binden Sie die Taste zum Zurücksetzen:

$scope.toggleBool = function() { 
    $scope.myBool = !$scope.myBool; 
    $scope.myForm.$setPristine(); 
} 

Wenn Sie einen separaten haben wollen Set von Werten für das Formular und für den ursprünglichen Zustand eines Objekts, müssen Sie das Objekt klonen und dann den Klon im Formular verwenden. Ansonsten ändern alle Änderungen immer sofort das ursprüngliche Objekt.

Sie können dann den Zustand des Formulars bestimmen, indem Sie einen tiefen Vergleich zwischen dem ursprünglichen Objekt und seinem Klon durchführen.

UPDATE Mai '15: Diese Antwort ist ab 2013 ngModelController ein significantly richer API in neueren Versionen von Angular (derzeit 1.4) gewonnen hat, die für die Verwaltung Form Zustand einige Mechanismen bietet.