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

前端之家收集整理的这篇文章主要介绍了AngularJS表单验证:通过ui.router状态更改$dirty值更改前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的用例:

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

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

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

重现问题的步骤(plunkr):

>填写第1步并转到下一部分
>检查xBox收音机,然后单击该号码返回步骤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

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

要实现您想要的功能,您必须在状态转换时手动跟踪$dirty状态,并在需要时在表单上应用$setDirty.

这是一个快速示例,向表单步骤页面添加一个控制器,它在退出时保存表单状态(对于共享服务实例,您也可以通过解决方添加它)并在构造时恢复它.当前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;
  })

})

猜你在找的Angularjs相关文章