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：端口地址，我需要顯示自定義錯誤消息'無效的服務器地址'。該指令運作良好。下面可以使用和自定義類可以應用，但我需要顯示消息就像引導顯示所需的字段。

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

我如何可以顯示使用通過指令ngMessages自定義的驗證如下圖所示的圖像？

Answer 1

快速指令驗證IP：

<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> 

：像

<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：我爲你

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創建的端口

我plunkr：https://plnkr.co/edit/KI9jAqPRkLTYm5EvBKza?p=preview