AngularJS - Show Custom Error Message using Directive

Question

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 ?

@FetraR could you elaborate with some code snippet or alteration to above directive ? — Slimshadddyyy
– Slimshadddyyy, Commented Feb 15, 2017 at 7:06
@Slimshadddyyy Here you go plnkr.co/edit/KI9jAqPRkLTYm5EvBKza?p=preview — Fetrarij
– Fetrarij, Commented Feb 15, 2017 at 7:41

Fetrarij · Accepted Answer · 2017-02-15 08:22:43Z

1

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

answered Feb 15, 2017 at 8:22

Fetrarij

7,3463 gold badges33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Slimshadddyyy Over a year ago

Could you tell me what I missed here - plnkr.co/edit/uAcISTnCNcfbrQIIcuqS?p=preview

Fetrarij Over a year ago

1. add ngMessages modules 2. use loginForm as you mentionned in form name="loginForm"

Slimshadddyyy Over a year ago

Its the same. But the message is not disappearing when I type correct server address

<body ng-controller="MainCtrl">     <form name="myForm">       <div class="input-group">         <input type="text" validate-address-port placeholder="255.255.255.255:5000" name="serveraddress" id="serveraddress" class="color-tooltip form-control" ng-model="serveraddress" required>       </div>       <span ng-show="myForm.serveraddress.$dirty" ng-message="invalidserveraddress" class="help-block">Invalid Address:port</span>     </form>   </body>

Collectives™ on Stack Overflow

AngularJS - Show Custom Error Message using Directive

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related