Ich habe ein mehrstufiges Formular mit ng switch und 3 Formularen erstellt, um die Daten über den Formularen zu erhalten. Ich habe einen Dienst mit der Factory-Methode erstellt. Ich versuche jedoch, eine Schaltfläche zum Zurücksetzen zu erstellen, und möchte die Daten in allen Feldern in löschen Das aktuell angezeigte Formular behält die Daten in anderen Formularen bei, die sich in dem von der Fabrik erstellten Modell widerspiegeln sollen. Ich habe versucht, setpristine über dem Formular zu verwenden, aber das Modell wird nicht aktualisiert. Bitte helfen Sie und überprüfen Sie unten js bin Link http://jsbin.com/raxorewuma/edit?html,css,js,output

  angular.module('bankAppOnline', [])
                          .controller('CustomerCtrl', function ($scope) {
                            $scope.step = 1;

                            $scope.advance = function () {
                              $scope.step++;
                            }
                             $scope.previous = function () {

                              $scope.step--;
                            }

                          })
                          .controller('firstformCtrl', function ($scope, Customer) {
                            $scope.customer = Customer.get();
                          $scope.reset = function() {


                                $scope.firstform.$setPristine();
                                //$scope.customer = Customer.get();
                            }  
                          })
                          .controller('secondformCtrl', function ($scope, Customer) {
                            $scope.customer = Customer.get();
                            console.log( $scope.customer );
                          })
                            .controller('thirdformCtrl', function ($scope, Customer) {
                            $scope.customer = Customer.get();
                            console.log( $scope.customer );
                          })
                          .factory('Customer', function () {
                            var customer = {
                              firstname: "",
                              lastname: "",
                              age:"",
                              city:"",
                              profession:"",    
                              mobile:"" ,
                             pan:"",
                             income:"", 
                             company:"",
                             designation:"",
                             profession:"",
                             address:"",
                             pin:"",
                             accountType:"" ,
                             fdCheck:"",
                             creditCardCheck:""
                            };

                            return {
                              get: function () {
                                return customer;
                              }
                            }
                          })

                          .controller('DebugCtrl', function ($scope, Customer) {
                            $scope.customer = Customer.get();
                          });// Empty JS for your own code to be here
0
kiran gudla 23 Dez. 2015 im 20:34

2 Antworten

Beste Antwort

Die Funktion $ setPristine löscht die Dirty-Klasse nur vom Eingabeelement. Die Daten werden nicht zurückgesetzt. Dazu müssen Sie jedes Datenelement in der Form, die den Daten im Kundenmodell entspricht, explizit zurücksetzen. Ein Beispiel finden Sie in meinem Code: Option 1 (transparenter Ansatz):

  .controller('firstformCtrl', function ($scope, Customer) {
    $scope.customer = Customer.get();
    $scope.reset = function() {
        $scope.firstform.$setPristine();

        // The elements to reset for the first form. 
        // You'll have to do this foreach controller's reset function.
        var restore = {
            "firstname": "",
            "lastname": "",
            "age": "",
            "city": "",
            "profession": "",
            "mobile": ""
        };
        angular.extend($scope.customer, restore);

    };  
  })

Option 2 (Kapselung):

.factory('Customer', function () {
    var customer = {
        firstname: "",
        lastname: "",
        age:"",
        city:"",
        profession:"",    
        mobile:"" ,
        pan:"",
        income:"", 
        company:"",
        designation:"",
        profession:"",
        address:"",
        pin:"",
        accountType:"" ,
        fdCheck:"",
        creditCardCheck:""
    };

    return {
        get: function () {
            return customer;
        },

        reset: function(keys){
            angular.forEach(keys, function(val) {
                customer[val] = ""
            });
        }
    };
})

Ersetzen Sie nun die Rücksetzfunktion für das erste Formular durch die folgende. Jedes zusätzliche Formular ruft die Customer.reset-Funktion mit dem entsprechenden Schlüsselarray als Argument auf.

$scope.reset = function() {
    $scope.firstform.$setPristine();

    // The elements to reset for the first form. 
    // You'll have to do this foreach controller's reset function.
    var valsToReset = [
        "firstname",
        "lastname",
        "age",
        "city",
        "profession",
        "mobile"
    ];
    Customer.reset(valsToReset);
}; 
2
dlporter98 24 Dez. 2015 im 03:33

Das Formularobjekt, das von AngularJS hinter den Kulissen verwaltet wird, ist von Ihrem Kundenobjekt getrennt. Durch Festlegen der Voreinstellung im Formular werden Datenfelder im Modellobjekt, das sich hinter dem HTML-Formular befindet, nicht automatisch gelöscht. Unter dem Strich müssen Sie den Code angeben, um diese Daten zu löschen. Ich könnte dies eine Funktionalität des Kunden in die Fabrik aufnehmen, da der Kunde im Grunde genommen als Singleton arbeitet. Rufen Sie dann diese Kundenfunktionen innerhalb der reset() -Funktion auf jedem Controller auf.

.factory('Customer', function () {
        var customer = {
          firstname: "",
          lastname: "",
          age:"",
          city:"",
          profession:"",    
          mobile:"" ,
         pan:"",
         income:"", 
         company:"",
         designation:"",
         profession:"",
         address:"",
         pin:"",
         accountType:"" ,
         fdCheck:"",
         creditCardCheck:""
        };

        return {
          get: function () {
            return customer;
          },

          clearFirst: function() {
              //clear all the properties that are 
              //a part of the first form
              customer.firstname = "";
              customer.lastname = "";
              //....continue clearing
          },

          clearSecond: function() {
              //clear all the properties that are 
              //a part of the second form
          },

          clearThird: function() {
              //clear all the properties that are 
              //a part of the third form
          }
        }

})

2
Andrew Tomlinson 23 Dez. 2015 im 18:30