Skip to content

Angularjs directive which use google's libphonenumber library for international phone number validations.

License

Notifications You must be signed in to change notification settings

eraycetinay/ng-valid-phone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ng Valid Phone

npm version Bower dependency Status license

Angularjs directive which use google's libphonenumber library for international phone number validations.

Installation

npm install ng-valid-phone
bower install ng-valid-phone

Features

  • International number validation.
  • National number validation.
  • Number masking and filtering
  • Example numbers as placeholders.
  • Defining countryCode ability.
  • Simple and fast integration.

Usage

  • Add 'libphonenumber.js' and 'ng-valid-phone.js' to your source.
<script src="bower_components/google-libphonenumber/dist/libphonenumber.js"></script>
<script src="bower_components/ng-valid-phone/dist/ng-valid-phone.js"></script>

Basic Setup

  • Add ng-valid-phone directive to your html element.
  • With basic setup, validation will work for all international numbers.
  • Eg; 86 431 2344 1234 (CH) - 1 201 555-1234 (US)
<input type="text" ng-model="test" ng-valid-phone />

Country Code Setup

  • You can use country code (2 letter regional code) option to get only national number with its pattern.
  • countryCode should be initialize as a variable. In this way you can create a select box for your country list.
  • Or simply you can use ng-init to initialize countryCode in temaplate like in this example.
<input type="text" ng-model="test" data-country-code="countryCode" ng-init="countryCode='US'" ng-valid-phone />

Placeholder Setup

  • If you define a country-code param, you can use place-holder option too. It will show an example national number for the defined country.
<input type="text" ng-model="test" data-place-holder="1" data-country-code="countryCode" ng-init="countryCode='US'" ng-valid-phone />

Example

You can set error/success messages by using angular's basic validation checks.

<form name="myForm">
  <input type="text" ng-model="test" name="test" data-place-holder="1" data-country-code="countryCode" ng-init="countryCode='US'" ng-valid-phone />
  <span ng-show="!myForm.test.$valid">Please enter a valid number.</span>
  <span ng-show="myForm.test.$valid">Your phone number is valid.</span>        
</form>

Notes

  • If you define a countryCode, validation will be done only for that country.
countryCode:US,  Valid numbers: 1201 555 1234 - 201 555 1234
  • if client uses country code at the beginning it will be removed after validation automatically.
countryCode:US,  Number: 1201 555 1234 or 0201 555 1234 will be changed to 201 555 1234 after the last digit is entered.
  • If you dont specify a country code, validation will be done for all international numbers.
Eg; Valid numbers: 86 431 2344 1234 (CH) - 90 531 232 12 34 (TR) - 1 201 555-1234 (US)

License

MIT license.

About

Angularjs directive which use google's libphonenumber library for international phone number validations.

Resources

License

Stars

Watchers

Forks

Packages

No packages published