angularjs - 使用指令验证表单输入字段

Question

我想使用指令将“ng-pattern”应用于表单输入字段。假设我想检查提供的值是否为整数。

表单标记

<form class="form" name="frm" novalidate>
<div class="form-group">
    <label class="control-label">Age</label>
    <input int
        type="text"
        name="age"
        class="form-control"
        ng-model="fd.age">
        <span class="help-block" ng-show="frm.age.$error.pattern">
           age is just a number.
        </span>
</div>
</form>

指令代码是这样的

app.directive("int", function($compile){
    return {
        restrict: "A",
        scope: true,
        replace: true,
        link: function(scope, elem, attrs) {
            elem.attr("ng-pattern", "/[0-9]+/");
        }
    }
});

在标记中，我可以看到它已正确应用，但仍然无法正常工作。该模式是正确的，因为当我在标记中明确使用它而不使用指令时，它可以很好地工作。

我有两个问题。

1. 为什么这不起作用？

2. 由于我必须编写很多此类特定于域的指令，因此我的方法解决此问题模式是否正确。

Answer 1

与其尝试在自定义指令中封装现有验证器，不如尝试按照本文中的说明实现自定义验证规则

我已经使用这种技术修改了您的示例。

小提琴

代码：

<form class="form" name="frm" novalidate>
<div class="form-group">
    <label class="control-label">Age</label>
    <input int
        type="text"
        name="age"
        class="form-control"
        ng-model="fd.age">
        <span class="help-block" ng-show="frm.age.$error.numberValidator">
           age is just a number.
        </span>
</div>
</form>

JS：

app.directive("int", function() {
      return {
        restrict: "A",
        scope: true,
        replace: true,
          require: 'ngModel',
        link: function(scope, elem, attrs,ctrl) {
            function customValidator(ngModelValue) {
    
              if (/^[0-9]+$/.test(ngModelValue)) {
                ctrl.$setValidity('numberValidator', true);
              } else {
                ctrl.$setValidity('numberValidator', false);
              }
              return ngModelValue;
            }
            ctrl.$parsers.push(customValidator);
          }
        }
    });

更新

对于您的特定情况 -本文档$error.number中描述了标准验证规则

更新 2

要回答您的第一个问题 - 要使ng-pattern指令正常运行，您需要通过服务为给定元素重新运行编译周期$compile并将其绑定到scope. 像这样：

myApp.directive("int2", function($compile) {
  return {
    restrict: "A",
    scope: true,
    replace: true,
    require: 'ngModel',
    link: function(scope, elem, attrs) {
      elem.attr("ng-pattern", "/^[0-9]+$/");
      elem.removeAttr("int2");
      $compile(elem)(scope); 
    }
  }
});

这是一个更新的Fiddle来说明该行为。