AngularJS表单验证:通过ui.router状态更改$ dirty值更改

Question

我的用例:

我有一个使用ui-router的多步骤表单,如下面的plunkr.我使用ng-form来验证AngularJS提供的信息,比如$ valid,$ dirty等.

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

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

重现问题的步骤(plunkr):

1. 填写第1步并转到下一部分
2. 检查xbox收音机并单击该号码返回步骤1 myMultiStepForm.interests.xbox.$dirty = true
3. 回到第2步 myMultiStepForm.interests.xbox.$dirty = false

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

有办法避免这种情况吗？或者除了<ng-form>处理字段子集的验证之外的其他东西？

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

Answer 1

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

为了实现你想要的，你必须手动跟踪$dirty状态之间的状态转换，并$setDirty在需要时应用到表单上。

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

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

})