Is there any ready-to-use Ionic components for international phone number validation?

Is there any ready-to-use Ionic3 UI components for international phone number validation?

None that I could find, so I rolled my own.

To grab country code I use a label, that when clicked opens up a modal with a search bar and a list of country codes.

For formatting and validating a phone number, I used a custom input mask: https://gist.github.com/JoeMeeks/e7932fa291ba1c7e1e66597e5b52c633

I found that the input mask doesn’t play well with FormBuilder validation (but that code could probably be extended to handle that as well), thus I use my own TypeScript validation to validate the phone number.

Thank you so much, so as I understood from your code, I should add the patterns of all international phone numbers to validate all of them, right ?

Yes and there are public repositories (with awesome licenses) that list country codes in json format. Thus instead of an input I made an ion search with the json of country codes as the item. See the attached screenshot for an example.

1 Like

You can use this plugin.
https://www.npmjs.com/package/ngx-international-phone-number

I got recommended this from a co-worker


@AjoyKarmakar the plugin you recommended is missing a lot of countries and has a lot of issues that wasn’t suited to my needs (does not have Australia).

The install process for me in an Ionic 3 project (using Lazy Loading) was to a bit of learning curve, as importing the css and images was troublesome.

Outline of installing this plugin Ionic 3 project using Lazy Loading

  1. npm install as per usual, but add the Module to my pages Module page (ie login.module.ts) - because my project is using Ionic 3 Lazy Loading
  2. in app.scss :
  • Importing from node_modules
  • Override the paths for flag images used by the css file
@import "../../node_modules/intl-tel-input/build/css/intlTelInput";
@mixin override-paths-for-flag-images() { 
    // rule here to override paths for these images, copied images from "node_modules/intl-tel-input/build/image"
    .iti-flag {
        background-image: url("/assets/img/flags.png");
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2 / 1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
        .iti-flag {
            background-image: url("/assets/img/flags@2x.png");
        }
    }
}
@include override-paths-for-flag-images();
  1. Copy the flags.png and flags@2x.png to my src/assets/img directory
  2. Now I am able to use the directive but only as an traditional input (ie not ion-input), which means overriding styling, and in my case using hasError for validation.
2 Likes

Update:

  • I converted the flag images to data uris (Google png to data uri)
  • then used that as the url

background-image: url(data:image/png;base64,somerandombase64stringhere)

  • I don’t have to do step 3 - I don’t need to copy the images anywhere - which means I don’t need to worry about relative paths, but still overriding using the base64 img

I have been battling with this component for the past 6 hours.
I finally got this working thanks to your help

1 Like

Glad I could help @vofili

Thanks for this! Was struggling to get the css files working before hand and it’s working now.

How did you style your input to get it looking the same as the ion-input? I have all ion-inputs on my page and like you mentioned cannot use the ng2TelInput directive on it.

Any help would be great! Thank you