如何使用服务以多步形式重置当前表单以保留数据

Question

我使用 ng switch 和 3 个表单创建了一个多步骤表单，以便保留表单上的数据我使用工厂创建了一个服务 method.But 我正在尝试创建一个重置按钮，我想清除当前显示表单中所有字段中的数据，将数据保留在其他表单中，这些数据应该反映在 factory.I 创建的模型中试图在表单上使用 setpristine，但模型没有得到更新。请帮助并检查下面的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

Answer 1

$setPristine 函数仅清除输入元素中的脏 class。它不会重置数据。为此，您必须显式重置与客户模型中的数据相对应的表单中的每个数据元素，请参阅我的代码示例：选项 1（透明方法）：

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

    };  
  })

选项 2（封装）：

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

现在将第一个表单的重置函数替换为以下内容。每个额外的表单都会调用 Customer.reset 函数，并将适当的键数组作为参数。

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

Answer 2

AngularJS 在幕后维护的表单对象与您的客户对象是分开的。在表单上设置 preistine 不会自动清除 HTML 表单后面的模型对象中的数据字段。最重要的是，您必须提供代码来清除这些数据。我可能会将此作为客户在工厂中的功能，因为客户基本上是作为单例运行的。然后从每个来自控制器的 reset() 函数内部调用这些客户函数。

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

})

如何使用服务以多步形式重置当前表单以保留数据

how to reset current form in a mutil step forms using a service to preserve data

forms

angularjs

angular-services