检查angularjs中未保存的表单数据(使用ui路由器的多个表单)
check for unsaved form data in angularjs ( multiple forms using ui-router )
实现细节:
我正在使用ui路由器在ui视图div中加载表单页面。我引用了Andres Ekdahi的一个很好的例子,"我如何使用同一指令对多个表单进行$dirty检查?"?
形式1
<form name="myForm" ng-controller="Controller" confirm-on-exit>
形式2
<form name="iForm" ng-controller="Controller" confirm-on-exit ng-model="myModel">
app.js(指令)
myApp.directive('confirmOnExit', function() {
return {
link: function($scope, elem, attrs) {
// condition when back page is pressed
window.onbeforeunload = function(){
if ($scope.myForm.$dirty) {
return "The formI is dirty, do you want to stay on the page?";
}
}
// condition when user try to load other form (via icons )
$scope.$on('$stateChangeStart', function(event, next, current) {
if ($scope.myForm.$dirty) {
if(!confirm("myForm. Do you want to continue ?")) {
event.preventDefault();
}
}
if ($scope.iForm.$dirty) {
if(!confirm("iform. Do you want to continue ?")) {
event.preventDefault();
}
}
});
}
};
});
错误:
第一次加载页面时,$dirty值为false。我填写表单详细信息并单击第三个图标(文件),我在警报中得到第二个表单脏检查if ($scope.iForm.$dirty)
和$dirty
的错误。
angular.js:12520 TypeError: Cannot read property '$dirty' of undefined
和
<form name="iForm" ng-controller="Controller" confirm-on-exit="" ng-model="myModel" class="ng-pristine ng-untouched ng-valid ng-scope">
演示:Plunker
有一种更简单的方法。
只需将您的指令放在表单元素上,并通过链接功能访问表单控制器:
myApp.directive('confirmOnExit', function() {
return {
require: 'form',
link: function($scope, elem, attrs, formController) {
// condition when back page is pressed
window.onbeforeunload = function(){
if (formController.$dirty) {
return "The form '" + formController.$name + "' is dirty, do you want to stay on the page?";
}
}
// condition when user try to load other form (via icons )
$scope.$on('$stateChangeStart', function(event, next, current) {
if (formController.$dirty) {
if(!confirm(formController.$name + ". Do you want to continue ?")) {
event.preventDefault();
}
}
});
}
};
});
从form
的name
属性中提取指令,使指令更加简单,这样一个指令中只有一个条件&它可以在许多地方重复使用。
<form name="myForm" ng-controller="Controller" confirm-on-exit>
代码
var form = $scope[attrs.name]; //which will take out form name & do search that inside scope
if (form.$dirty) { //form object would always exist, to make sure you could also add one more check `form &&`
if(!confirm("myForm. Do you want to continue ?")) {
event.preventDefault();
}
}
此处演示
在检查表单是否脏之前,先检查表单是否存在。做一些类似的事情
if ($scope.myForm && $scope.myForm.$dirty) {
if(!confirm("myForm. Do you want to continue ?")) {
event.preventDefault();
}
}
if ($scope.iForm && $scope.iForm.$dirty) {
if(!confirm("iform. Do you want to continue ?")) {
event.preventDefault();
}
}
相关文章:
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 语义ui表单验证:图像url
- 使用Backbone在模型更改时渲染表单会导致表单UI错误
- 验证表单中的 jQuery-UI 微调器
- 具有输入类型文件字段的语义UI重置表单
- Safari在表单提交期间未更新UI
- 检查angularjs中未保存的表单数据(使用ui路由器的多个表单)
- jquery ui模式框中的表单隐藏后,键盘将不再被调用
- 仅当表单上存在某些条件时.aspx引发 jQuery-UI 确认对话框
- 无法在 jquery.html() 之后将表单提交到 jquery ui 对话框中
- AngularJS多步骤表单(ui.router)提交
- 使用 jQuery UI 模式表单永久更改 HTML 文本
- 在带有 ui:repeat 的表单中使用引导开关
- Symfony2在不同的JQuery UI选项卡中使用多个表单,但单个页面
- 一个字段上的语义 UI 表单验证规则是否可以以另一个字段为条件
- 无法将表单输入字段上的 JQuery UI 工具提示限制为仅在单击/焦点事件上显示
- XML 与 JSON 在 UI 上将完整的树传递到基于决策的动态表单
- 语义 UI 在成功时,在表单验证时未触发失败回调
- 如何将块UI与setTimeout一起使用,并在表单提交时防止默认
- 使用 jQuery UI 选项卡拆分表单是否会影响表单发布到 PHP