我的用例:
我有一个使用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无法知道那些值是来自服务器的默认状态,还是之前用户交互的结果;它们是一个简单的字符串或没有附加这种元数据的东西.
原文链接:https://www.f2er.com/angularjs/141940.html要实现您想要的功能,您必须在状态转换时手动跟踪$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; }) })