CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Slimshadddyyy
Slimshadddyyy

Reputation: 4073

AngularJS - Show Custom Error Message using Directive

Directive to validate 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 Input

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

Until user types a valid IP:PORT address, I need to show custom error message 'Invalid Server Address'. The directive works well. Below could be used and custom class can be applied, but I need to show the message just like bootstrap shows for required field.

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

How can I show custom validation using ngMessages via directive as shown in below image ?

enter image description here

Upvotes: 0

Views: 3579

Answers (1)

Fetrarij
Fetrarij

Reputation: 7326

Quick directive to validate ip:port I created for you

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>

and now, you can use ngMessages like:

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

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

Upvotes: 1

Related Questions