AngularJS 表单验证 : $dirty value change through ui. 路由器状态更改

Question

我的用例:

我有一个使用 ui-router 的多步骤表单，如下面的 plunkr 所示。我使用 ng-form 来验证 AngularJS 提供的信息，例如 $valid、$dirty 等。

每次单击“下一部分”按钮后，我将表单数据发送到服务器以检索它，以防用户在完成之前退出表单。

如果用户两次提交第一步，我只发送编辑后的数据(如果 $dirty 值为 true)。所有这些都不在 plunkr 中，我选择向您展示一个简单的表单，但我的表单可以包含一百个字段(单选、复选框、输入、选择等)。

重现问题的步骤 (plunkr) :

填写步骤 1 并转到下一部分

选中 Xbox radio 并单击数字返回第 1 步myMultiStepForm.interests.xbox.$dirty = true

回到第 2 步
myMultiStepForm.interests.xbox.$dirty = false

为什么 $dirty 值改为 false？我猜是因为 <ng-form>再次显示并重置所有验证数据。

有没有办法避免这种情况？或者可能不是 <ng-form>处理字段子集的验证？

这是plunkr: http://plnkr.co/edit/WclqVgiBvUXlsGdSCcj0?p=preview

Answer 1

当您链接表单或其中的任何 Controller 时，它始终以 $pristine 开头.原因是像 formData.type 这样的模型只是有一些值，angular 无法知道这些值是默认状态，来自服务器，还是先前用户交互的结果；他们是一个简单的string或者没有附加这种元数据的东西。

要实现您想要的，您必须手动跟踪 $dirty跨状态转换的状态，并应用 $setDirty需要时在表格上。

这是一个简单的示例，向表单步骤页面添加一个 Controller ，它在退出时保存表单状态(到共享服务实例，您也可以通过 resolve 添加它)并在构造时恢复它。当前formPage通过默认参数值注入(inject)，以便可以将同一 Controller 用于所有步骤。

// router:

$stateProvider.state('form.interests', {
  url: '/interests',
  controller: 'FormStepController',  
  params: { formPage: 'interests'}
  templateUrl: 'form-interests.html'
})

// state

angular.value("formDirtyState", {});

// controller

angular.controller("FormStepController", function($scope, formDirtyState, $stateParams) {
  var formPage = stateParams.formPage;

  for(var formField in $scope.myMultiStepForm[formPage]) {
    if(formDirtyState[formPage] && formDirtyState[formPage][formField])
      $scope.myMultiStepForm[formPage][formField].$setDirty()
  }
    

  $scope.$on("$destroy", function() { 
    for(var formField in $scope.myMultiStepForm[formPage])
      formDirtyState[formField] = $scope.myMultiStepForm[formPage][formField].$dirty;
  })

})