angularjs – 如果模型变为无效,如何使用最后一个有效的modelValue？

我正在开发一个应用程序,可以在用户更改内容时自动保存更改,例如输入字段的值.我编写了一个自动保存指令,该指令被添加到应自动触发保存事件的所有表单字段中.

模板：

<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并在autosaving时使用它.如果用户将电子邮件地址更改为无效,则包含名称和电子邮件的对象仍应保存到服务器.使用当前有效名称和最后一封有效电子邮件.

我开始时保存最后一个有效的modelValue,如下所示：

添加验证的模板：

<input type="email" ng-model="fooCtrl.name" autosave required>
   <input ng-model="fooCtrl.email" autosave required>

保存lastModelValue的指令：

.directive('autosave',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,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的情况下设置模型值并尝试验证新设置的值吗？

我创建了一个简单的指令,作为ng-model指令的包装器,并始终保持最新的有效模型值.它被称为valid-ng-model,应该在您想要拥有最新有效值的地方替换ng-model的使用.

我已经创建了一个示例用例here,我希望你会喜欢它.欢迎任何改进的想法.

这是valid-ng-model指令的实现代码.

app.directive('validNgModel',function ($compile) {
  return {
      terminal: true,priority: 1000,scope: {
        validNgModel: '=validNgModel'
      },link: function link(scope,attrs) {

        // NOTE: add ngModel directive with custom model defined on the isolate scope
        scope.customNgModel = angular.copy(scope.validNgModel);
        element.attr('ng-model','customNgModel'); 
        element.removeAttr('valid-ng-model');

        // NOTE: recompile the element without this directive
        var compiledElement = $compile(element)(scope);
        var ngModelCtrl = compiledElement.controller('ngModel');

        // NOTE: Synchronizing (inner ngModel -> outside valid model)
        scope.$watch('customNgModel',function (newModelValue) {
          if (ngModelCtrl.$valid) {
            scope.validNgModel = newModelValue;
          }
        });

        // NOTE: Synchronizing (outside model -> inner ngModel)
        scope.$watch('validNgModel',function (newOutsideModelValue) {
          scope.customNgModel = newOutsideModelValue;
        });
      }
    };
});

Edit: directive implementation without isolate scope: 07001.

angularjs – 如果模型变为无效,如何使用最后一个有效的modelValue？

相关文章