Question

我创建了一个numberDirective

function numberInputDirective()
 {
    return 
    {
        restrict: 'E',
        scope: 
        {
            model: '=',
            disabled: '=?',
            decimals: '=?',
            form: '=',
            name: '='
        },
        require: '^form',
        replace: true,
        templateUrl: 'directives/pxNumberInput.html',
        link: function (scope, element, attrs, form) 
        {
              scope.inError = function () 
              {
                  return form.control.$valid; //I need to do something like this    
              }
        }
    }

如果控件中的值有效，我需要检查isError函数

模板是：

<input class="input-field form-control" type="number" ng-model="model">

HTML是：

 <form role="form" class="form-horizontal psi-keyrates-yieldform psi-keyrates-historical-topcurves" name="SampleControlsForm" novalidate>
      <px-number-input id="objectiveid" name="numericExample"    model="sampleDataModel.numericField" placeholder="Enter numeric value" label="Numeric" required maxlength="10"></px-number-input>
</form>

虽然表单变量告诉我表单（表单。$ valid）是否有效，但我需要知道这个特定的指令在提交表单时是否有效。类似这样的形式.control。$ valid。

我不知道该指令中控件的名称，因为它将在html中设置。

我试过：var elem = ctrl。$ name +＆＃39;。＆＃39; + element.attr（＆＃39; name＆＃39;）+＆＃39;。$ valid＆＃39 ;; 这将返回字符串＆＃34; SampleControlsForm.numericExample。$ valid＆＃34;如果我在上面添加一个手表，它既没有帮助也没有范围。$ eval。

我确定我没有正确使用它。

Answer 1

以下是自定义数字验证程序的示例，其中显示：

如何require ngModel以便您可以访问其控制器。
如何通过向$validators对象添加属性（角度1.3及以上）来添加自己的自定义验证器。对于角度＆lt; 1.3，使用ngModelController.$setValidity
如何在$watch对象上设置$error以插入/删除图像，具体取决于验证通过还是失败。
如何创建适用于ngModel的自定义指令，而无需定义模板。

$validators对象允许您为同一ngModel注册多个验证指令。要添加验证器，只需将验证指令添加到与ngModel相同的元素即可。

var app = angular.module('app', []);
app.directive('myNumber', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    compile: function(element, attr) {
      var img = angular.element('<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTTyptDmp09eMq1nHtcJHVTAMkKgqdi1ZiGMQSjFeYNApkO92zhCA" />');
           
      return function(scope, element, attr, ngModelCtrl) {
        function isNumber(n) {
            return !isNaN(parseFloat(n)) && isFinite(n);
        }
        
        ngModelCtrl.$validators.mynumber = function(val) {
          return isNumber(val);
        };
        scope.$watch(function() {
          return ngModelCtrl.$error.mynumber;
        }, 
        function(newVal) {
          if (newVal) {
            element.after(img);
          }
          else {
            img.remove();
          }
        });
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<div ng-app="app">
  <form name="form">
    <input type="text" name="age" my-number ng-model="age" /> {{ age }}
  </form>
  {{ form.age.$error }}
</div>

AngularJS - 如何验证元素指令？

1 个答案: