AngularJS表单验证：通过ui.router状态更改$dirty值更改
|
我的用例：
我有一个使用ui-router的多步形式,如下面的plunkr.我使用ng-form来验证AngularJS提供的信息,比如$valid,$dirty等. 每次单击“下一部分”按钮后,我将表单数据发送到服务器以便检索它,以防用户在完成之前退出表单. 如果用户提交两次第一步,我只发送编辑过的数据(如果$dirty值为true).所有这些都不在plunkr中,我选择向您展示一个简单的表单,但我的表单可以包含一百个字段(收音机,复选框,输入,选择等). 重现问题的步骤(plunkr)： >填写第1步并转到下一部分 为什么$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;
})
})
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |