AngularJs. $ SetPristine zum Zurücksetzen des Formulars

Ich hatte Probleme, das Formular zurückzusetzen, sobald das Formular gesendet wurde. Jemand hat dies hier gepostet , damit es funktioniert, aber kein Erfolg. Hier ist mein My Code Beispiel .

$scope.form.$setPristine();wird nicht Pristine: {{user_form.$pristine}}auf true gesetzt . Siehe Beispiel oben.

$ setPristine () wurde im 1.1.x-Zweig von anglejs eingeführt. Sie müssen diese Version anstelle von 1.0.7 verwenden, damit sie funktioniert.

Siehe http://plnkr.co/edit/815Bml?p=preview

Hatte ein ähnliches Problem, bei dem ich das Formular auf makellos, aber auch auf unberührt zurücksetzen musste, da sowohl $ invalid als auch $ error zum Anzeigen von Fehlermeldungen verwendet wurden. Nur die Verwendung von setPristine () reichte nicht aus, um die Fehlermeldungen zu löschen.

Ich habe es mit setPristine () und setUntouched () gelöst. (Siehe Angulars Dokumentation: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController )

Also habe ich in meinem Controller Folgendes verwendet:

$scope.form.setPristine(); 
$scope.form.setUntouched();

Diese beiden Funktionen setzen das vollständige Formular auf $ pristine und zurück auf $ unberührt zurück, sodass alle Fehlermeldungen gelöscht wurden.

Nur für diejenigen, die ein $setPristineUpgrade auf v1.1.x durchführen möchten, ist hier die Funktion, mit der ich die $setPristineFunktion simuliert habe . Ich wollte die Version 1.1.5 nur ungern verwenden, da eine der von mir verwendeten AngularUI-Komponenten nicht kompatibel ist.

var setPristine = function(form) {
    if (form.$setPristine) {//only supported from v1.1.x
        form.$setPristine();
    } else {
        /*
         *Underscore looping form properties, you can use for loop too like:
         *for(var i in form){ 
         *  var input = form[i]; ...
         */
        _.each(form, function (input) {
            if (input.$dirty) {
                input.$dirty = false;
            }
        });
    }
};

Beachten Sie, dass es NUR $dirtyFelder sauber macht und dabei hilft, die Bedingung 'Fehler anzeigen' wie zu ändern $scope.myForm.myField.$dirty && $scope.myForm.myField.$invalid.

Andere Teile des Formularobjekts (wie die CSS-Klassen) müssen noch berücksichtigt werden, aber dies löst mein Problem: Fehlermeldungen ausblenden.

Es gibt eine andere Möglichkeit, ein makelloses Formular zu erstellen , indem Sie das Formular an den Controller senden. Zum Beispiel:-

Im Hinblick auf:-

<form name="myForm" ng-submit="addUser(myForm)" novalidate>
    <input type="text" ng-mode="user.name"/>
     <span style="color:red" ng-show="myForm.name.$dirty && myForm.name.$invalid">
      <span ng-show="myForm.name.$error.required">Name is required.</span>
    </span>

    <button ng-disabled="myForm.$invalid">Add User</button>
</form>

Im Controller: -

$scope.addUser = function(myForm) {
       myForm.$setPristine();
};

Die Antwort von DavidLn hat in der Vergangenheit für mich gut funktioniert. Aber es erfasst nicht alle Funktionen von setPristine, was mich diesmal aus der Fassung gebracht hat. Hier ist eine vollere Unterlegscheibe:

var form_set_pristine = function(form){
    // 2013-12-20 DF TODO: remove this function on Angular 1.1.x+ upgrade
    // function is included natively

    if(form.$setPristine){
        form.$setPristine();
    } else {
        form.$pristine = true;
        form.$dirty = false;
        angular.forEach(form, function (input, key) {
            if (input.$pristine)
                input.$pristine = true;
            if (input.$dirty) {
                input.$dirty = false;
            }
        });
    }
};

Ich habe das gleiche Problem gelöst, ein Formular in seiner ursprünglichen Version in Angular Version 1.0.7 zurücksetzen zu müssen (keine $ setPristine-Methode).

In meinem Anwendungsfall muss das Formular nach dem Ausfüllen und Absenden verschwinden, bis es erneut zum Ausfüllen eines weiteren Datensatzes erforderlich ist. Also habe ich den Show / Hide-Effekt gemacht, indem ich ng-switch anstelle von ng-show verwendet habe. Wie ich vermutet habe, wird mit ng-switch der Formular-DOM-Unterbaum vollständig entfernt und später neu erstellt. So wird der ursprüngliche Zustand automatisch wiederhergestellt.

Ich mag es, weil es einfach und sauber ist, aber möglicherweise nicht für jeden Anwendungsfall geeignet ist.

Dies kann auch zu Leistungsproblemen bei großen Formularen führen (?). In meiner Situation war dieses Problem noch nicht aufgetreten.