Question

我有一个自定义指令，并希望使用此指令模板中使用的输入字段中的验证器。有没有办法用输入验证器扩展ngModelCtrl验证器？

这是我的指示：

angular.module('myModule')
  .directive('myUrl', function() {
    return {
      restrict: 'A',
      require: ['ngModel', '^form'],
      replace: true,
      templateUrl: '/components/url/my-url.html',
      scope: {},
      link: function(scope, element, attrs, ctrls) {
        var ngModelCtrl = ctrls[0];
        var formCtrl = ctrls[1];
        scope.formField = ngModelCtrl;

        // Scope data vars
        scope.url = '';

        // Watchers
        scope.$watch('url', function(newValue) {
          ngModelCtrl.$setViewValue(newValue);
        });

        // Validators
        var inputValidators = formCtrl['my-url'].$validators;
        ngModelCtrl.$validators = angular.copy(inputValidators);

        // Custom render
        ngModelCtrl.$render = customRender;

        function customRender() {
          scope.url = ngModelCtrl.$viewValue;
        }
      }
    }
  });

这是我的观点：

    <div>
      <label>My URL</label>\
      <input type="url" name="my-url" placeholder="http://" ng-model="url">
      <div ng-messages="formField.$error" ng-show="formField.$invalid">
        <span ng-message="url">Invalid URL.</span>
      </div>
    </div>

这里有一个小问题：https://jsfiddle.net/bsmaniotto/gzLmy1op/

感谢。

修改

刚才意识到问题不在于将input[url]验证程序绑定到我的自定义指令ngModelCtrl的验证程序。正在验证input[url]元素，当输入无效输入时，$modelValue未设置，因此，对于我的自定义指令，它没有输入任何内容。

Answer 1

如果您使用控制器，

输入验证在角度上非常容易。你可以添加：

ui-event：{keyup：＆＃39; controller.validationFunctionName（无论如何）＆＃39;}

只需填写“等等”。使用输入字段中的文本，每次释放一个键，它将检查您的验证功能

如果您希望它在其下方显示错误，只需创建另一个具有ng-if =到该键盘函数结果的div

如何从指令中的输入字段向ngModelCtrl添加验证？

1 个答案: