Angularjs 如何使用服务在多步骤表单中重置当前表单以保留数据

我使用ng开关和3个表单创建了一个多步骤表单，为了保留表单上的数据，我使用factory方法创建了一个服务。但我正在尝试创建一个重置按钮，并且我希望清除当前显示表单中所有字段中的数据，保留其他表单中的数据，这些数据应该反映在factory创建的模型中。我尝试在表单上使用setpristine，但模型没有得到响应更新。 请帮助并查看下面的js bin链接

---

$setPristine函数仅从输入元素中清除脏类。它不会重置数据。为此，必须以与客户模型中的数据对应的形式显式重置每个数据元素，请参见我的代码以获取示例： 备选案文1（透明办法）：

备选方案2（重新填充）：

现在，将第一个表单的重置功能替换为以下内容。每个附加表单都将调用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);
}; 

---

$setPristine函数仅从输入元素中清除脏类。它不会重置数据。为此，必须以与客户模型中的数据对应的形式显式重置每个数据元素，请参见我的代码以获取示例： 备选案文1（透明办法）：

备选方案2（重新填充）：

现在，将第一个表单的重置功能替换为以下内容。每个附加表单都将调用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);
}; 

---

AngularJS在后台维护的表单对象与客户对象是分开的。在表单上设置preistine不会自动清除HTML表单后面的模型对象中的数据字段。底线是您必须提供代码来清除这些数据。我可能会将此作为客户在工厂中的一项功能，因为客户基本上是作为一个单体操作的。然后从每个from控制器上的

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

---

})

AngularJS在后台维护的表单对象与客户对象是分开的。在表单上设置preistine不会自动清除HTML表单后面的模型对象中的数据字段。底线是您必须提供代码来清除这些数据。我可能会将此作为客户在工厂中的一项功能，因为客户基本上是作为一个单体操作的。然后从每个from控制器上的

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

---

---

})

您是否打算在调用

reset（）

时以某种方式清除customer对象的数据字段？（即，第一个表单将为空）@AndrewTomlinson是的，我可以通过angular.copy（{}）清除字段，但是客户工厂数据没有得到更新是的，您的意图是在调用

reset（）

时以某种方式清除客户对象的数据字段吗？（即，第一个表单将为空）@AndrewTomlinson是的，我可以通过angular.copy（{}）清除字段，但是客户工厂数据没有得到更新，是的，在扩展函数@dlporter98中重置了，谢谢，工作正常！！你能解释一下为什么我做angular.copy时它不能工作吗？你在哪里使用copy（），我找不到对它进行注释的代码。哎呀，我删除了它而不是extend，我用copy来复制空对象，但不起作用extend function@dlporter98中重置的是什么？谢谢，工作正常！！你能解释一下为什么我做angular.copy时它不能工作吗？你在哪里使用copy（），我找不到对它进行注释的代码。哎呀，我删除了它，而不是扩展了它。我用copy来复制空对象，但不起作用。谢谢你的回答。dlporter98答案很好，做得很好。你能让我知道我应该遵循哪种方式吗？在客户对象中合并重置功能是一种很好的做法。我将在customer对象上创建一个重置函数，该函数需要清除一组键。这将比创建单个清晰的方法更加灵活。我完全同意@dlporter98，他的解决方案非常棒。如果您研究AngularJS表单对象，可能还有一种很好的方法来创建一个函数，它是Customer对象的一部分，接受角度表单作为输入参数。然后，该函数将遍历表单中的字段，并清除相应的Customer字段。因此，您不需要使用三个单独的函数，而是使用一个类似于

clearFields（someForm）

的函数，只需传递第一个表单、第二个表单等的实例。祝您好运！谢谢大家，通过我们的讨论，我学到了很多关于angular的知识。谢谢你的回答。dlporter98的答案很好，工作做得很完美。你能让我知道我应该遵循哪种方式吗？在客户对象中合并重置功能是一种很好的做法。我将在customer对象上创建一个重置函数，该函数需要清除一组键。这将比创建单个清晰的方法更加灵活。我完全同意@dlporter98，他的解决方案非常棒。如果您研究AngularJS表单对象，可能还有一种很好的方法来创建一个函数，它是Customer对象的一部分，接受角度表单作为输入参数。然后，该函数将遍历表单中的字段，并清除相应的Customer字段。因此，您不需要使用三个单独的函数，而是使用一个类似于

clearFields（someForm）

的函数，只需传递第一个表单、第二个表单等的实例。祝您好运！谢谢大家，通过我们的讨论，我学到了很多关于angular的知识

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