javascript - 在 AngularJs 中处理输入验证？

Question

我对 AngularJS 很陌生，我只是不知道如何验证我的输入。

我有一个永远不应该为空的输入。该模型始终具有值(value)。每当用户输入无效数据(即没有任何数据或可能是无效字符)时，我希望输入恢复为其原始值。

例如，如果初始值为 50 并且我删除了所有这些(或输入的文本)并取消选择输入，我希望输入的值更改回 50.

这是我的 Controller :

var MyController = null;
app.controller("MyController", ["$scope", function($scope) {
    $scope.data = myData;
    $scope.validate = function(value, oldValue) {
        if(!value || value == "") {
            // Do something after validation
            value = oldValue;
        }
        // Our value should be valid now (either replaced or changed)
    }
    MyController = $scope;
}]);

还有我的 HTML(如果可能的话，我宁愿不必输入 data.something 两次):

<input type="text" ng-model="data.something" ng-change="validate()" />

小说明:如果输入的值为“50”并且用户删除了“0”，则输入将为“5”，这是有效的。但是，如果用户在我不希望更改输入后添加“x”，则它仍应为“5”。但是，如果所有输入都是空的，我希望将 onBlur 将原始值放回输入中，并且模型保持不变。

Answer 1

是的，你需要 ng-blur，可能还需要 ng-focus:

<input type="text" ng-model="data.something" ng-focus="store()" ng-blur="revertIfInvalid()"/>

$scope.store = function() {
  $scope.stored = $scope.data.something;
}

$scope.revertIfInvalid= function() {
  if (!$scope.data.something) {
    $scope.data.something = $scope.stored;
  }
}

这可以工作，但为了使其可重用，您需要为此制定指令，例如:

app.directive('fancydirective', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(sc, elem, attrs, ngModelCtrl) {
      var stored;
      elem.on('focus', function() {
        sc.$apply(function() {
          stored = ngModelCtrl.$modelValue;
        });
      });
      elem.on('blur', function() {
        sc.$apply(function() {
          if (ngModelCtrl.$invalid) {
            ngModelCtrl.$setViewValue(stored);
            ngModelCtrl.$render();
          }
        });
      });
    }
  }
});

http://plnkr.co/edit/fiRKS765Kyh6ikRqc8if?p=preview