【发布时间】：2015-12-14 05:49:25
【问题描述】：
我正在开发一个应用程序，当用户更改某些内容（例如输入字段的值）时会自动保存更改。我编写了一个autosave 指令，该指令被添加到所有应该自动触发保存事件的表单字段中。
模板：
<input ng-model="fooCtrl.name" autosave>
<input ng-model="fooCtrl.email" autosave>
指令：
.directive('autosave', ['$parse', function ($parse) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
function saveIfModelChanged () {
// save object containing name and email to server ...
}
ngModel.$viewChangeListeners.push(function () {
saveIfModelChanged();
});
}
};
}]);
到目前为止，这一切对我来说都很好。但是，当我将验证添加到组合中时，例如将输入字段验证为有效的电子邮件地址，一旦 viewValue 更改为无效的电子邮件地址，modelValue 就会设置为 undefined。
我想做的是：记住最后一个有效的 modelValue 并在自动保存时使用它。如果用户将电子邮件地址更改为无效，则包含name 和email 的对象仍应保存到服务器。使用当前有效的name 和最后一个有效的email。
我从保存最后一个有效的 modelValue 开始，如下所示：
添加了验证的模板：
<input type="email" ng-model="fooCtrl.name" autosave required>
<input ng-model="fooCtrl.email" autosave required>
保存 lastModelValue 的指令：
.directive('autosave', ['$parse', function ($parse) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
var lastModelValue;
function saveIfModelChanged () {
// remeber last valid modelValue
if (ngModel.$valid) {
lastModelValue = ngModel.$modelValue;
}
// save object containing current or last valid
// name and email to server ...
}
ngModel.$viewChangeListeners.push(function () {
saveIfModelChanged();
});
}
};
}]);
我的问题是，如何在保存时使用lastModelValue，但在视图中保留无效值？
编辑：
另一种可能性，as suggested by Jugnu below，是在验证器中包装和操作构建。
我尝试遵循：包装所有现有验证器并记住最后一个有效值，以在验证失败时恢复它：
Object.keys(ngModel.$validators).forEach(function(validatorName, index) {
var validator = ngModel.$validators[validatorName];
ngModel.$validators[validatorName] = createWrapper(validatorName, validator, ngModel);
});
function createWrapper(validatorName, validator, ngModel){
var lastValid;
return function (modelValue){
var result = validator(modelValue);
if(result) {
lastValid = modelValue;
}else{
// what to do here? maybe asign the value like this:
// $parse(attrs.ngModel).assign(scope, lastValid);
}
return result;
};
}
但我也不确定如何继续使用这种方法。我可以在没有 AngularJS 的情况下设置模型值并尝试验证新设置的值吗？
【问题讨论】：
-
鉴于您也在开发应用程序的后端，我会考虑将整个问题外包给后端。如果后端恰好是 node.js，我只需将这些值
v更新到我的数据库中，v!==undefined保存并为自己节省一些工作时间。我了解您可能无法这样做或出于学习目的而进行此项目，这只是我对开发效率的想法。
标签： angularjs angularjs-validation