AngularJS - 使用指令显示自定义错误消息

Question

验证 IP:PORT 的指令

myApp.directive("validateServerAddress", ['input', function (input) {

    var linker = function (scope, element, attrs) {
        alert('Tese');
        var parts = input.split(":");
        var ip = parts[0].split(".");
        var port = parts[1];
        return validateNum(port, 1, 65535) &&
            ip.length == 4 &&
            ip.every(function (segment) {
            return validateNum(segment, 0, 255);
        });
        scope.validateNum = function(input, min, max) {
            var num = +input;
            return num >= min && num <= max && input === num.toString();
        }
    };
    return {
        restrict: "EA",
        link: linker
    };
}]);

HTML 输入

<div class="input-group">
    <input type="text" validate-serveraddress placeholder="255.255.255.255:5000" name="serveraddress" id="serveraddress" class="color-tooltip form-control" ng-model="serveraddress" required>
</div>

在用户输入有效的 IP:PORT 地址之前，我需要显示自定义错误消息“无效的服务器地址”。该指令运行良好。下面可以使用并且可以应用自定义类，但我需要像引导程序一样显示必填字段的消息。

    document.querySelector("input").oninput = function (e) {
        this.className = validateIpAndPort(this.value) ? "" : "invalid";
    }
.invalid {
    color: red;
}

如何通过指令使用 ngMessages 显示自定义验证，如下图所示？

Answer 1

验证 ip:port 我为您创建的快速指令

app.directive("validateAddressPort", function() {
  function validateIpAndPort(input) {
          var parts = input.split(":");
          var ip = parts[0].split(".");
          var port = parts[1];
          return validateNum(port, 1, 65535) &&
              ip.length == 4 &&
              ip.every(function (segment) {
                  return validateNum(segment, 0, 255);
              });
      }

      function validateNum(input, min, max) {
        var num = +input;
        return num >= min && num <= max && input === num.toString();
      }
    return {
        restrict: "A",
        require: "ngModel",
        link: function(scope, element, attributes, ngModel) {
            ngModel.$validators.invalidaddressport = function(input) {
                if(!input) {
                    return false;
                }
                return validateIpAndPort(input);
            }
        }
    };
});

html:

    <form name="myForm">
      <div class="input-group">
        <input type="text" ng-model="serveraddress" validate-address-port placeholder="255.255.255.255:5000" name="serveraddress" id="serveraddress" class="color-tooltip form-control" ng-model="serveraddress" required>
      </div>
    </form>

现在，您可以像这样使用 ngMessages：

<div ng-messages="myForm.serveraddress.$error" style="color:red" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="invalidaddressport">Invalid Address:port</div>
</div>

我的朋友：https://plnkr.co/edit/KI9jAqPRkLTYm5EvBKza?p=preview