ng-ip-address

AngularJS directive that will validate an IP address and impose relevant character and structure limits
Homepage:
1 person uses it
Author: 8493265?v=3 CautemocSg
Submitted by: 8493265?v=3 CautemocSg

Bower version NPM version Code Climate devDependency Status Downloads GitHub stars

Description

An attribute directive that will limit an input to appropriate IP address characters and structure, as well as validate the value.

Currently only supports IPv4 Addresses

View a live demo on Plnkr, CodePen, or jsFiddle.

Install

It is available through NPM:

npm install ng-ip-address

Or, via bower:

bower install ng-ip-address --save

Usage

Include ngIpAddress.min.js or ngIpAddress.vanilla.min.js in your build or directly with a <script> tag and require the module in your module definition:

js

angular.module('App', ['ng-ip-address', ... // other dependencies]);

html

<input ng-model="model" ng-ip-address />

Entries breaking one of the validation rules will cause the input to become invalid and gain the ng-invalid-ip-address class. Valid entries will have ng-valid-ip-address class.

Additional Options

Vanilla version does not include additional options so is a smaller file and may perform faster

Port options are accessed through ng-ip-config property.

html

<input ng-model="model" ng-ip-address ng-ip-config="ipConfigObj" />

js

$scope.ipConfigObj = {allowPort: bool, requirePort: bool};

Options default to false and requirePort being true ignores allowPort.

Features

Limits User Input
  • Four segments with optional port (ex: 172.16.254.1:24213)
  • Each segment limited to 3 numbers
  • Leading zeroes are removed (ex: 2.02 will be turned into 2.2)
  • Duplicate periods are removed
  • Characters limited to numbers and period

with allowPort set to true

  • Limited to one colon in the fourth IP segment
  • Port is limited to 5 numbers
Validates User Input
  • Each segment must be between 0 and 255
  • Must be 4 segments

with allowPort set to true

  • If port exists, it must be between 1 and 65535

with requirePort set to true

  • Port must be present

Planned Releases

Version 1.2.0
  • Support for IPv6
comments powered by Disqus
This page was last updated over 1 year ago.