Ip Address mask for AngularJS

Question

Does Anyone know a ip address mask plugin for AngularJS?

Because I tried to use the "Jquery Input IP Address Control", but it's not working. When I try to use it, the "ngModel" attribute doesn't get the value of the textfield. In the screen I can see the value inside the textfield, however, if I do ".value()" in the element, it return a "" value. The same thing occur when I see the value of the $scope element by using console.log().

Can anyone help me?

Thanks!

Edit: SOLVED

People, problem solved.

I used this directive available in http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController:

app.directive('contenteditable', function() {
    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel', // get a hold of NgModelController
        link: function(scope, element, attrs, ngModel) {
            if(!ngModel) return; // do nothing if no ng-model

            // Specify how UI should be updated
            ngModel.$render = function() {
            element.html(ngModel.$viewValue || '');
           };

           // Listen for change events to enable binding
           element.bind('blur keyup change', function() {
           scope.$apply(read);
           });
           read(); // initialize

           // Write data to the model
           function read() {
            ngModel.$setViewValue(element.val());
           };
       }
    };
});

After I used this directive, the Jquery Plugin worked fine. Probably because now the ngNodel is getting the element.val(). Before, I think it was getting the element.text().

Ideally you would create a directive that would apply the jQuery plugin which would also handle updating of the `ngModel` value. — Mark Coleman, Jun 10 '13 at 14:40

score 8 · Answer 1 · edited Jun 27 '16 at 14:48

I'm just wondering why you need this in the first place. What about just using [ngPattern][1] directive and placeholder attribute ?

 <div ng-app='app' ng-controller='myCtrl' ng-form='myForm'>
   <input type='text' ng-model='ip' 
          ng-pattern='/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/' 
          placeholder='xxx.xxx.xxx.xxx'  />
   value : {{ ip }}    
 </div>

Several notes:

commenters adding ^ and $ quantifiers to the regex. You don't need to do that since angular adding them for you inside ng-pattern directive (see angular.js source code for ng-pattern)

I do not belive that regex is good match for checking if each number is in [0,255] range. What I would rather do is implement ng-ipaddress directive, working with ngModelController directly. (see js-fiddle or github link)

var app = angular.module('app',[])

.directive('ipAddress', function ipAddress(){

  return {
    restrict:'A',
    require:'?ngModel',
    link: function(scope, elm, attr, ctrl){         
      if (!ctrl) return;        
      ctrl.$parsers.push(function(viewValue){
        if (!viewValue) return null;          
        var isvalid = isValidIp(viewValue)          
        return isvalid ? viewValue : null;                   
      })
    }          
  }

  function isValidIp(value){
       var arr = value.split('.')
       var r = /^\d{1,3}$/;
       return arr.length === 4 && arr.map(function(e){
        return ( r.test(e) && ((e|0) >= 0) && ( (e | 0) <= 255))            
       }).every(function(e){ return e })                 
  }   
})

jsfiddle github

it is not working properly. it is accepting 12.11.11.1p. correct one is ng-pattern='/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/' — Jayesh, Nov 18 '14 at 09:49

score 8 · Answer 2 · edited Jun 29 '16 at 08:50

Assuming @Jayesh answer and made some shortenings here is the resulting correct version with pattern for 0.0.0.0 through 255.255.255.255

<input type="text"
       id="static_ip"
       name="static_ip"
       placeholder="Static IP"
       ng-model="device.static_ip"
       ng-pattern="/^(?:(?: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]?)$/"
       ng-model-options="{ updateOn: 'blur' }"
    />

I have added ng-model-options in order that validation be triggered only on blur effect so the error class if any only shows up after changing focus to another field. However it works only for AngularJS 1.3+

Ip Address mask for AngularJS

2 Answers2

Linked