angularjs - 在用户输入之前使用自定义指令进行数据验证

Question

我正在尝试使用我自己的指令验证表单上的数据，但只有在用户输入绑定后不正确的内容后才验证数据。

myApp.directive('dvCyrillic', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        var CYRILLIC_REGEX = /^[а-яё -]+$/i;
        if (CYRILLIC_REGEX.test(viewValue) || viewValue.length == 0) {
          // it is valid
          ctrl.$setValidity('cyrillic', true);
          return viewValue;
        } else {
          // it is invalid, return undefined (no model update)
          ctrl.$setValidity('cyrillic', false);
          return undefined;
        }
      });
    }
  };
});

这是一个例子。如何在用户输入之前验证数据？

Answer 1

$parsers只会从视图验证到模型，而将从$formatters模型验证到视图。您可以在单独的方法中重构您的验证，并将您的验证添加到解析器和格式化程序：

var CYRILLIC_REGEX = /^[а-яё -]+$/i;
ctrl.$parsers.unshift(validate);
ctrl.$formatters.unshift(validate);

function validate(viewValue) {
  if (CYRILLIC_REGEX.test(viewValue) || viewValue.length == 0) {
    // it is valid
    ctrl.$setValidity('cyrillic', true);
    return viewValue;
  } else {
    // it is invalid, return undefined (no model update)
    ctrl.$setValidity('cyrillic', false);
    return undefined;
  }
}

这是更新的小提琴