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]+/");
        }
    }
});

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

我有两个问题。

为什么这不起作用？
由于我必须编写很多这样的域特定指令，我的方法是否正确解决了这个问题模式。

Answer 1

您应该尝试按照this article

中的说明尝试实施自定义验证规则，而不是尝试在自定义指令中封装现有的验证程序。

我已经使用这种技术修改了你的例子。

Fiddle

代码：

<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);
          }
        }
    });

更新

针对您的具体情况 - this documentation中描述了标准验证规则$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来说明行为。

使用指令进行表单输入字段验证

1 个答案:

更新

更新2