How to validate an IP in a text field AngularJS

Question

How to validate an IP in a textfield in AngularJS ? Currently I am using this code, but its not working in all cases . Any idea ?

ng-pattern='/^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))[.]){3}(([0-1]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/

Might help you http://www.w3resource.com/javascript/form/ip-address-validation.php — Satpal, Aug 28 '14 at 12:08
@musically_ut it accepts 0.0.0.0 and 255.255.255.255 . I think it shouldn't. — Harikrishnan, Aug 28 '14 at 12:09
@Harikrishnan They look like valid IP addresses to me. Are these the only two address you want to exclude? — musically_ut, Aug 28 '14 at 12:11
Yes it is but you cannot assign this to a single host. Hence I cannot let user to input it. — Harikrishnan, Aug 28 '14 at 13:26
Update your ng-pattern value to '/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/'. It worked for me. Here's a link to more details. http://stackoverflow.com/questions/17025384/ip-address-mask-for-angularjs — Gene Parcellano, Nov 30 '15 at 16:37
Oops, I used the wrong ng-pattern value, use this instead "/^([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})$/" — Gene Parcellano, Nov 30 '15 at 17:03
I'd just like to add that I recently published an [attribute directive to handle ip addresses](https://github.com/CautemocSg/ng-ip-address). Feel free to leave feedback or suggestions for improvement. — CautemocSg, Jun 21 '16 at 14:02

score 10 · Accepted Answer · edited May 23 '17 at 12:17

Use:

/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/

Matches 0.0.0.0 through 255.255.255.255

If you want to drop 0.0.0.0 and255.255.255.255 I suggest you to add additional if statement. Otherwise the regex will be too complicated.

Example with watcher:

$scope.ip = '1.2.3.4';

    $scope.$watch(function () {
        return $scope.ip;
    },

    function (newVal, oldVal) {            
        if (
            newVal != '0.0.0.0' && newVal != '255.255.255.255' &&
            newVal.match(/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/))
        {
             // Match attempt succeeded
        } else {
            // Match attempt failed
        }
    })

Demo Fiddle

[Edit]

The best bet is to create directive, something like: <ip-input>

This example might helpful how to create directive for custom input: format-input-value-in-angularjs

Instead of adding a watch in your controller you can put this functionality inside an angular function and use that as an expression in the ng-change directive. — Ronald91, Aug 28 '14 at 13:20
@Ronald91 Well, for sure directive way is more appropriate, something like ``. But SO asks the regex validation. I added watcher only for demo. BTW, this is an example I wrote once with `$parsers`: http://stackoverflow.com/questions/19890364/format-input-value-in-angularjs/19890485#19890485 — Maxim Shoustin, Aug 28 '14 at 13:27

score 0 · Answer 2 · answered Jan 21 '22 at 12:39

Here's a directive to validate IPv4 and IPv6 address

app.directive('ipformat',function(){
  return {
      require: 'ngModel',
      link: function(scope,elem,attrs,ctrl){
          ctrl.$validators.ipformat= function (modelValue){
              if (ctrl.$isEmpty(modelValue)){
                  return false;
              }
              var expression = /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))/;
              if (expression.test(modelValue)) {
                return true;
            }
            else {
              return false;
            }
          }
      }
  }
});

And use this directive with input field in forms as

<input type="text" class="form-control" name="ipaddresstxt" id="ipaddressid"
                                     ng-model="ipaddress" 
                                     ipformat>

Remember directive requires ng-model. Feel free to update as per usage.

How to validate an IP in a text field AngularJS

2 Answers2

Linked