Format telephone and credit card numbers in AngularJS

Question

Question one  formatting telephone number    I m having to format a telephone number in AngularJS but there is no filter for it  Is there a way to use filter or currency to format 10 digits to  555  555-5255  and still preserve the data type of the field as integer   Question two  masking credit card number    I have a credit card field that is mapped to AngularJS  like    lt input type  text  ng-model  customer creditCardNumber  gt     which is returning the whole number  4111111111111111   I will like to mask it with xxx the first 12 digits and only show the last 4  I was thinking on using filter  limit for this but am not clear as how  Any ideas  Is there a way to also format the number with dashes but still retain the data type as integer  sort of 4111-1111-1111-1111

User · Answer

You will need to create custom form controls (as directives) for the phone number and the credit card. See section "Implementing custom form control (using ngModel)" on the forms page.

As Narretz already mentioned, Angular-ui's Mask directive should help get you started.

User · Answer

As shailbenq suggested  phoneformat is awesome    Include phone format in your website  Create a filter for the angular module or your application    angular module  ng    filter  tel   function          return function  phoneNumber            if   phoneNumber              return phoneNumber           return formatLocal  US   phoneNumber                Then you can use the filter in your HTML     phone tel    OR  lt span ng-bind  phone tel  gt  lt  span gt    If you want to use the filter in your controller    var number    5553219876   var newNumber    filter  tel   number

User · Answer

Also  if you need to format telephone number on output only  you can use a custom filter like this one   angular module  ng   filter  tel   function          return function  tel            if   tel    return                var value   tel toString   trim   replace                      if  value match    0-9                   return tel                     var country  city  number           switch  value length                case 10      1PPP        - gt  C  PPP     -                     country   1                  city   value slice 0  3                   number   value slice 3                   break               case 11      CPPP        - gt  CCC  PP     -                     country   value 0                   city   value slice 1  4                   number   value slice 4                   break               case 12      CCCPP        - gt  CCC  PP     -                     country   value slice 0  3                   city   value slice 3  5                   number   value slice 5                   break               default                  return tel                     if  country    1                country                          number   number slice 0  3     -    number slice 3            return  country          city          number  trim                 Then you can use this filter in your template      phoneNumber   tel     lt span ng-bind  phoneNumber   tel  gt  lt  span gt

User · Answer

I created an AngularJS module to handle this issue regarding phonenumbers for myself with a custom directive and accompanying filter   jsfiddle example  http   jsfiddle net aberke s0xpkgmq   Filter use example       lt p gt    phonenumberValue   phonenumber    lt  p gt   Filter code    filter  phonenumber   function                 Format phonenumber as  c  xxx  xxx-xxxx         or as close as possible if phonenumber length is not 10         if c is not  1   country code not USA   does not use country code             return function  number                         param  Number   String  number - Number that will be formatted as telephone number         Returns formatted number           -                 if number length  lt  4                  else if number length  lt  7                     Does not handle country codes that are not  1   USA                     if   number    return                number   String number               Will return formattedNumber              If phonenumber isn t longer than an area code  just show number         var formattedNumber   number              if the first character is  1   strip it out and add it back         var c    number 0      1      1                 number   number 0      1    number slice 1    number                         -     as c  area  front-end         var area   number substring 0 3           var front   number substring 3  6           var end   number substring 6  10            if  front                formattedNumber    c         area          front                       if  end                formattedNumber      -    end                     return formattedNumber               Directive use example    lt phonenumber-directive placeholder   Input phonenumber here   model  myModel phonenumber  gt  lt  phonenumber-directive gt    Directive code    directive  phonenumberDirective      filter   function  filter               Intended use           lt phonenumber-directive placeholder  prompt  model  someModel phonenumber  gt  lt  phonenumber-directive gt      Where          someModel phonenumber   String  value which to bind only the numeric characters  0-9  entered             ie  if user enters 617-2223333  value of 6172223333 will be bound to model         prompt   String  text to keep in placeholder when no numeric input entered             function link scope  element  attributes                scope inputValue is the value of input element used in template         scope inputValue   scope phonenumberModel           scope  watch  inputValue   function value  oldValue                 value   String value               var number   value replace    0-9   g                   scope phonenumberModel   number              scope inputValue    filter  phonenumber   number                          return           link  link          restrict   E           scope                phonenumberPlaceholder    placeholder               phonenumberModel    model                         templateUrl    static phonenumberModule template html           template    lt input ng-model  inputValue  type  tel  class  phonenumber  placeholder    phonenumberPlaceholder    title  Phonenumber  Format   999  9999-9999   gt                 Full code with module and how to use it  https   gist github com aberke 042eef0f37dba1138f9e

User · Answer

Try using phoneformat js  http   www phoneformat com    you can not only format phone number based on user locales  en-US  ja-JP  fr-FR  de-DE etc  but it also validates the phone number  Its very robust library based on googles libphonenumber project

User · Answer

You can use ng-pattern which is more easy and more light  http   tutorialzine com 2014 12 learn-regular-expressions-in-20-minutes   Here u can know about it   just some meaningful words   not needs any directive or filter

User · Answer

Simple filter something like this  use numeric class on input end filter charchter in        lt script type  text javascript  gt     Only allow number input     numeric   keyup function          this value   this value replace    0-9 -         s    g          this is filter for telefon number

User · Answer

I solved this problem with a custom Angular filter as well  but mine takes advantage of regex capturing groups and so the code is really short  I pair it with a separate stripNonNumeric filter to sanitize the input   app filter  stripNonNumeric   function         return function input            return  input    null    null   input toString   replace   D g                   The phoneFormat filter properly formats a phone number with or without the area code   I did not need international number support    app filter  phoneFormat   function           this establishes 3 capture groups  the first has 3 digits  the second has 3 digits  the third has 4 digits  Strings which are not 7 or 10 digits numeric will fail      var phoneFormat       d 3     d 3    d 4           return function input            var parsed   phoneFormat exec input              if input isn t either 7 or 10 characters numeric  just return input         return   parsed    input     parsed 1           parsed 1                 parsed 2     -    parsed 3               Use them simply    lt p gt   customer phone   stripNonNumeric   phoneFormat   lt  p gt    The regex for the stripNonNumeric filter came from here

User · Answer

Angular-ui has a directive for masking input  Maybe this is what you want for masking  unfortunately  the documentation isn t that great    http   angular-ui github com   I don t think this will help with obfuscating the credit card number  though

User · Answer

I took aberke s solution and modified it to suit my taste     It produces a single input element It optionally accepts extensions For US numbers it skips the leading country code Standard naming conventions Uses class from using code  doesn t make up a class Allows use of any other attributes allowed on an input element   My Code Pen   x000D   x000D  var myApp   angular module  myApp        x000D   x000D  myApp controller  exampleController   x000D    function exampleController  scope    x000D       scope user     profile   HomePhone    719  465-0001 x1234     x000D       scope homePhonePrompt    Home Phone   x000D        x000D   x000D  myApp x000D     x000D      Intended use  x000D       lt phone-number placeholder  prompt  model  someModel phonenumber    gt  x000D      Where   x000D        someModel phonenumber   String  value which to bind formatted or unformatted phone number x000D   x000D      prompt   String  text to keep in placeholder when no numeric input entered x000D     x000D   directive  phoneNumber   x000D       filter   x000D    function   filter    x000D      function link scope  element  attributes    x000D   x000D           scope inputValue is the value of input element used in template x000D        scope inputValue   scope phoneNumberModel  x000D   x000D        scope  watch  inputValue   function  value  oldValue    x000D   x000D          value   String value   x000D          var number   value replace    0-9   g       x000D          scope inputValue    filter  phoneNumber   number  scope allowExtension   x000D          scope phoneNumberModel   scope inputValue  x000D            x000D        x000D   x000D      return   x000D        link  link  x000D        restrict   E   x000D        replace  true  x000D        scope    x000D          phoneNumberPlaceholder    placeholder   x000D          phoneNumberModel    model   x000D          allowExtension    extension  x000D           x000D        template    lt input ng-model  inputValue  type  tel  placeholder    phoneNumberPlaceholder      gt   x000D         x000D      x000D      x000D    x000D      x000D      Format phonenumber as   aaa  ppp-nnnnxeeeee x000D      or as close as possible if phonenumber length is not 10 x000D      does not allow country code or extensions  gt  5 characters long x000D     x000D   filter  phoneNumber    x000D    function     x000D      return function number  allowExtension    x000D            x000D         param  Number   String  number - Number that will be formatted as telephone number x000D        Returns formatted number           -     x       x000D        if number length  lt  4      x000D        else if number length  lt  7            x000D        removes country codes x000D           x000D        if   number    x000D          return     x000D          x000D   x000D        number   String number   x000D        number   number replace    0-9   g       x000D         x000D           Will return formattedNumber   x000D           If phonenumber isn t longer than an area code  just show number x000D        var formattedNumber   number  x000D   x000D           if the first character is  1   strip it out  x000D        var c    number 0      1      1         x000D        number   number 0      1    number slice 1    number  x000D   x000D                    -     as  areaCode  prefix-endxextension x000D        var areaCode   number substring 0  3   x000D        var prefix   number substring 3  6   x000D        var end   number substring 6  10   x000D        var extension   number substring 10  15   x000D   x000D        if  prefix    x000D            formattedNumber    c         area          front   x000D          formattedNumber          areaCode          prefix   x000D          x000D        if  end    x000D          formattedNumber      -    end   x000D          x000D        if  allowExtension  amp  amp  extension    x000D          formattedNumber      x    extension   x000D          x000D        return formattedNumber  x000D         x000D      x000D     x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt div ng-app  myApp  ng-controller  exampleController  gt  x000D     lt p gt Phone Number Value     user profile HomePhone     null     lt  p gt  x000D     lt p gt Formatted Phone Number     user profile HomePhone   phoneNumber    lt  p gt  x000D           lt phone-number id  homePhone  x000D                        class  form-control   x000D                        placeholder  Home Phone   x000D                        model  user profile HomePhone  x000D                        ng-required    user profile HomePhone length    user profile BusinessPhone length    user profile MobilePhone length     gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This is the simple way  As basic I took it from http   codepen io rpdasilva pen DpbFf  and done some changes  For now code is more simply  And you can get  in controller -  4124561232   in view   412  456-1232   Filter   myApp filter  tel   - gt     tel  - gt      if  tel       return        value   tel toString   trim   replace                 city   undefined     number   undefined     res   null     switch value length       when 1  2  3         city   value       else         city   value slice 0  3          number   value slice 3      if number       if number length  gt  3         number   number slice 0  3     -    number slice 3  7        else         number   number       res          city          number  trim       else       res         city     return res   And directive   myApp directive  phoneInput     filter   browser  - gt     require   ngModel    scope      phone    ngModel    link    scope   element   attrs  - gt        scope  watch  phone    newVal  oldVal  - gt        value   newVal toString   replace    0-9  g      slice 0  10        scope phone   value        element val  filter  tel   value  false        return     return

User · Answer

I also found that JQuery plugin that is easy to include in your Angular App  also with bower  D   and which check all possible country codes with their respective masks   intl-tel-input  You can then use the validationScript option in order to check the validity of the input s value

User · Answer

You also can check input mask formatter   This is a directive and it s called ui-mask and also it s a part of angular-ui utils library   Here is working  Live example     For the time of writing this post there aren t any examples of using this directive  so I ve made a very simple example to demonstrate how this thing works in practice

User · Answer

Inject  xeditable  module in your angular app freely available     var App   angular module  App     xeditable      And then use its built in feature in your HTML code as follows    lt div gt    value number 2    lt  div gt

User · Answer

Find Plunker for Formatting Credit Card Numbers using angularjs directive  Format Card Numbers in xxxxxxxxxxxx3456 Fromat   angular module  myApp            directive  maskInput   function         return               require   ngModel               restrict   AE               scope                    ngModel                                   link  function scope  elem  attrs                    var orig   scope ngModel                  var edited   orig                  scope ngModel   edited slice 4  replace   d g   x     edited slice -4                    elem bind  blur   function                         var temp                      orig    elem val                        temp   elem val                        elem val temp slice 4  replace   d g   x     temp slice -4                                         elem bind  focus   function                         elem val orig                                                         controller  myCtrl      scope     interval   function  scope   interval         scope creditCardNumber    1234567890123456

User · Answer

Here is the way I created ssn directive which checks for the the pattern and I have used RobinHerbots  jquery inputmask  angular module  SocialSecurityNumberDirective               directive  socialSecurityNumber   socialSecurityNumber    function socialSecurityNumber         var jquery   require  jquery        var inputmask   require  jquery inputmask        return           require   ngModel           restrict   A           priority  1000          link  function scope element  attr  ctrl                 var jquery element   jquery element               jquery element inputmask  mask     -  -      autoUnmask true                jquery element on  keyup paste focus blur   function                     var val   element val                        ctrl  setViewValue val                   ctrl  render                                   var pattern      d 9                  var newValue   null               ctrl  validators ssnDigits   function value                     newValue   element val                    return newValue          true   pattern test newValue

User · Answer

I modified the code to output phone in this format Value   38  095  411-22-23 Here you can check it enter link description here      var myApp   angular module  myApp         myApp controller  MyCtrl   function  scope       scope currencyVal       myApp directive  phoneInput   function  filter   browser        return           require   ngModel           link  function  scope   element   attrs  ngModelCtrl                var listener   function                     var value    element val   replace    0-9  g                        element val  filter  tel   value  false                                   This runs when we update the text field             ngModelCtrl  parsers push function viewValue                    return viewValue replace    0-9  g      slice 0 12                                   This runs when the model gets updated on the scope directly and keeps our view in sync             ngModelCtrl  render   function                      element val  filter  tel   ngModelCtrl  viewValue  false                                 element bind  change   listener                element bind  keydown   function event                    var key   event keyCode                     If the keys include the CTRL  SHIFT  ALT  or META keys  or the arrow keys  do nothing                     This lets us support copy and paste too                 if  key    91     15  lt  key  amp  amp  key  lt  19      37  lt   key  amp  amp  key  lt   40                        return                                     browser defer listener      Have to do this or changes don t get picked up properly                               element bind  paste cut   function                      browser defer listener                                         myApp filter  tel   function          return function  tel            console log tel           if   tel    return                var value   tel toString   trim   replace                      if  value match    0-9                   return tel                     var country  city  num1  num2  num3           switch  value length                case 1              case 2              case 3                  city   value                  break               default                  country   value slice 0  2                   city   value slice 2  5                   num1   value slice 5 8                   num2   value slice 8 10                   num3   value slice 10 12                                  if country  amp  amp  city  amp  amp  num1  amp  amp  num2  amp  amp  num3               return        country        city          num1   -    num2    -    num3  trim                      else if country  amp  amp  city  amp  amp  num1  amp  amp  num2                return        country        city          num1   -    num2  trim             else if country  amp  amp  city  amp  amp  num1                return        country        city          num1  trim             else if country  amp  amp  city                return        country        city   trim             else if country                 return        country  trim

[angularjs] Format telephone and credit card numbers in AngularJS

Examples related to angularjs

Examples related to number-formatting