AngularJS - anzeigen Benutzerdefinierte Fehlermeldung mit der Richtlinie

Question

Richtlinie IP überprüfen: 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 Eingang

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

Bis Benutzer eine gültige IP: PORT-Adresse, muss ich zeigt benutzerdefinierte Fehlermeldung 'Ungültige Serveradresse'. Die Richtlinie funktioniert gut. Unten könnte verwendet werden und benutzerdefinierte Klasse kann angewendet werden, aber ich muss die Nachricht wie Bootstrap zeigt für das erforderliche Feld anzeigen.

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

Wie kann ich zeigen, benutzerdefinierte Validierung ngMessages über Direktive wie in Bild unten gezeigt?

Answer 1

Schnell Richtlinie zur Validierung ip: port I

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 für Sie erstellt:

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

und jetzt können Sie ngMessages wie verwenden:

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

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