CODEWITHSUNDEEP
javascriptmobiletypescriptionic-frameworkionic2
Mahmoud Ismail
Mahmoud Ismail

Reputation: 1617

How can i create a phone number validation in ionic 2?

I want to create a phone number validation in ionic 2 and i've find an example intlpnIonic but it created in ionic 1. so i want like below image: enter image description here

So My Question : How can i create a phone validation like image?.

Upvotes: 1

Views: 8194

Answers (2)

Anil Kumar
Anil Kumar

Reputation: 711

Best method you can check it here

http://www.moodycoder.com/custom-validator-method/

also you can check below code 

static isValidMobile(control: FormControl): any {

    let regExp = /^[0-9]{10}$/;

    if (!regExp.test(control.value)) {
        return {"invalidMobile": true};
    }
    return null;
}

it works like a charm for me...

Upvotes: 3

Mahmoud Ismail
Mahmoud Ismail

Reputation: 1617

i've used third party library named intl-tel-input.

1- First install jQuery

npm install --save jquery

Now, within any of the app files import jquery like 

import $ from "jquery";

and it will using like 

$('#elemId').width();

2- install intl-tel-input library

npm install intl-tel-input --save

Now, within any of the app files import int-tel-input like

import 'intl-tel-input';

and using like below:

ngOnInit(): any {
    let telInput = $("#elemtId");
    let output = $("#output");

    telInput.intlTelInput();
    // listen to "keyup", but also "change" to update when the user selects a country
    telInput.on("keyup change", function() {
      var intlNumber = telInput.intlTelInput("getNumber");
      if (intlNumber) {
        output.text("International: " + intlNumber);
      } else {
        output.text("Please enter a number below");
      }
    });
  }

home.html

<p id="output">Please enter a number below</p>
<input id="elemtId" type="tel">

ionic info

Your system information:

Cordova CLI: 6.3.1 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: OS X El Capitan
Node Version: v5.12.0
Xcode version: Xcode 7.3 Build version 7D175

Upvotes: 2

Related Questions