nikhiln / ngx-international-phone-number Goto Github PK

View Code? Open in Web Editor NEW

43.0 8.0 77.0 3.16 MB

A simple international telephone number input for Angular

License: MIT License

JavaScript 18.57% TypeScript 76.83% HTML 2.61% CSS 1.99%

ngx-international-phone-number's Introduction

ngx-international-phone-number

A simple international telephone number input. Allows you to create a phone number field with country dropdown.

This is re-written version (with enhancement) of ng4-intl-phone. So credit should go to kondi0.

Installation

To install this library, run:

$ npm install ngx-international-phone-number --save

Consuming your library

Once you have installed it you can import InternationalPhoneNumberModule from ngx-international-phone-number in any application module. E.g.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { InternationalPhoneNumberModule } from 'ngx-international-phone-number';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // InternationalPhoneNumberModule module
    InternationalPhoneNumberModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once it is imported, you can use international-phone-number:

<!-- app.component.html -->
<form name="sample-form" (ngSubmit)="submit()" #f="ngForm">
 <international-phone-number [(ngModel)]="model.phone_number" placeholder="Enter phone number" [maxlength]="20" [defaultCountry]="'in'" [required]="true" #phoneNumber="ngModel" name="phone_number" [allowedCountries]="['in', 'ca', 'us']"></international-phone-number>

  <div *ngIf="f.submitted && !phoneNumber.valid" class="help-block">Phone number is required and should be valid</div>
  <button type="submit">Submit</button>
</form>

Attributes/Options:

   defaultCountryCode : An ISO 3166 country code can be provided to set default country selected.
   placeholder: A placeholder text which would be displayed in input widget
   required: Indicates whether it's required or not
   onlyNumber: Indicates whether the user can type only numbers or not in the input field. It defaults to true.
   allowDropdown: Indicates whether to allow selecting country from dropdown
   allowedCountries: A list of countries (iso codes) that would get display in country dropdown. E.g. [allowedCountries]="['in', 'ca', 'us']" would only show Canada, India and US. If not provided, all the countries would get displayed.

Troubleshooting:

If you are getting error "Can't resolve 'google-libphonenumber'" while building with aot, try to install google-libphonenumber. Run npm install [email protected] --save

Authors

* Original Author: kondi0
* Author: nikhiln

License

MIT

ngx-international-phone-number's People

Contributors

Stargazers

Watchers

ngx-international-phone-number's Issues

Canada and US number Confusion

Hello,

I am using Angular 4 and I implemented this plugin in my project.
My issue is when I am retrieving a Canadian mobile number the flag is set to US flag.

Thanks,

Set my own list of countries?

I don't want to show all the countries in the list, and instead I have my own list of countries.
Is there a way to do that?

submodule demo causes error

When installing this module using git as the source, the broken link for folder demo causes error

npm ERR! code 128
npm ERR! Command failed: /usr/bin/git submodule update -q --init --recursive
npm ERR! fatal: No url found for submodule path 'demo' in .gitmodules

Could you remove the folder demo?

drop down does not hide if touched outside area in mobile

Thanks for wonderful library.

I have found one issue, when I touch outside of drop down area. the drop down does not hide.

In browser, when i clicked outside area it actually hides dropdown. But in mobiles, it not working.

Not able to disable the input field

Hello,

I am using this package with a reactive form and trying to make the input field disabled. This is not working for some reason.

this.form = this.formBuilder.group({
    phone_country_code: [{value: '', disabled: true}],
    phone: ['']
});

Is there any workaround? Thanks!

Re-written version - V2

Following scope is for v2 version:

Upgrade to latest angular version
Support to add custom styling (with custom class support)
Add support for Reactive form control
Custom template to render the form fields including country dropdown and number input
Provides the extracted information from provided input (E.g. extracting country code or other available information from provided input)
Provide directive as well which allows user to convert any regular input element in phone number widget
All open issues marked as v2

How can i show country code as selected number in dropdown instead of country flag?

+39 shows itlay flag and when i type, it changes to vatican city

I write +39 and it shows itlay flag, while if i start typing the flag changes to vatican city, as it has same code in library, while the code should be +379

Cannot Focus Phone Textbox when TabIndex is set

I am using Angular 7. I have upgraded to the latest version "1.0.4". When I set "tabindex" attribute on your control, it does not focus to text box and user has to click on Textbox to start typing. Without tabindex it works fine. see sample code below:

<international-phone-number name="Mobile" [(ngModel)]="staff.Mobile" #Mobile="ngModel" tabindex="8" [required]="true" [defaultCountry]="defaultCountry"> </international-phone-number>

number format can only input

in android i can enter text character also but user can only allow to input number or can i set to open a number keyboard on this?

Andorra and Australia

When +61 (Australia country code) is typed in, Andorra is selected instead of Australia.

Another way to replicate the issue is:

Select Australia from the drop down.
Type a digit.
Australia is changed to Andorra.

Problem with Angular Material Input field

I have tried a lot to customize the field same as angular-material input field with the floating label. But unable to customize it. So, can you provide the way to customize it same as the material field which follows all the UI functionality same as material field.

[ngClass] cannot be detect

Hi there, i would like to ask about the problem that the Angular 8 [ngClass] this one cannot be add into the

 <international-phone-number  placeholder="Enter phone number" 
              [maxlength]="20" [defaultCountry]="'us'" formControlName="mobile" name="phone_number" 
              [ngClass]="{ 'is-invalid': f.mobile.touched && f.mobile.invalid }"></international-phone-number>
              <div *ngIf="f.mobile.touched && f.mobile.invalid" class="help-block">
                  <div *ngIf="f.mobile.errors.required">Your mobile is required</div>
                  <div *ngIf="f.mobile.invalid">Your mobile is invalid</div>

              </div>

I try, the error will come out, but the ngClass couldnt be detect.

Separating code and phone number

Can you make a change to separate code from phone number? It will be a better feature for your component.

Problem with Allowed Countries messing up the package

I am using:
"@angular/animations": "^4.4.7",
"@angular/cdk": "^5.2.5",
"@angular/cli": "^1.7.4",
"@angular/common": "^5.2.11",
"@angular/compiler": "^5.2.11",
"@angular/compiler-cli": "^5.2.11",
"@angular/core": "^5.2.11",
"@angular/forms": "^5.2.11",
"@angular/http": "^5.2.11",
"@angular/language-service": "^5.2.11",
"@angular/material": "^5.2.5",
"@angular/platform-browser": "^5.2.11",
"@angular/platform-browser-dynamic": "^5.2.11",
"@angular/router": "^5.2.11"

And the current version of "ngx-international-phone-number": "~1.0.1", I require https resources for the flags so I am using this new version.
The package gets installed properly, but when I run my angular app I get this:
ERROR in node_modules/ngx-international-phone-number/phone-number.component.d.ts(13,23): error TS1122: A tuple type element list cannot be empty.

I dug a bit on this and found that variable allowedCountries: [ ] has been wrongly type-casted in the build. It should have been allowedCountries: Country[ ].

I'll try to put up a PR for this.

How can i show country code drop-down instead of country flag? after selecting?

Problem with autofocus after selection of the country code

I am using Angular 5 and I have implemented this plugin here

https://wynnify.herokuapp.com/ --> REGISTER HERE

When you are in register and select the country it will not focus the textbox, user needs to manually click on textbox to get the focus on the textbox.

Is there something I am missing?

Thank you in advance.

The input doesn't reflect is-invalid

When the form is validated and the phone number is not correct, the input's border doesn't turn red. In order for the 'invalid-feedback' to appear, I had to add to add to the CSS:

.form-group .is-invalid .invalid-feedback {
    display: block !important;
}

I've checked and the is-invalid class propagation does not reach the input. That's why its border doesn't turn red.

Question about adding css style

How to style this input ?

arabic language for country name and rtl support

hi this plugin only display english language but there is any option to list of country showing name of country in arabic or another language support?

Changes from github not reflected into 'npm install'

When I did npm install ngx-international-phone-number, the country code for Aus is missing. However it can found in Github repo. Please help with this. Thank you.

International extension not showing

Just wondering if anyone has ever had the issue of the international extension not coming through? Both with two way binding and just having it submit via formControl the international extension never comes through. The rest of the number is there.

<international-phone-number id="phoneNumber" aria-label="Phone Number" maskp="(###) ###-####" placeholder="Phone Number" formControlName="phoneNumber" [(ngModel)]="phoneNumber" name="phoneNumber">

First one with no two way binding, second with. Deleting the mask, changing the mask to accept internation doesn't seem to do anything

A lot of countries are missing from the list

Argentina country not show

Agentina not show in the list of country

ERROR SyntaxError: Invalid regular expression: /+/: Nothing to repeat

I am getting the following error, when the country flag drop down is opened and i type something in the text box.

Please help me with the issue. any help will be highly appreciated.

Reset the flag button after choosing some flag even input value is empty or null

Hi! I've used this library for my angular project. It works like a charm. But the phone input's flag button can't be reset even my reactive form input value has been emptied or nullified. It still remains as the previously chosen flag.

Reproduction for this problem:

Any help is appreciated! Thank you in advance.

do not allow country area code to be deleted

Can any one help. I don't want to allow to delete the country code when i am pressing backspace.

Not able to publish the code in ASPNET CORE angular js 4 environment

Error getting during publish

The command "node node_modules/webpack/bin/webpack.js --env.prod" exited with code

npm shrinkwrap.JSON UPDATED and there after it not allowing the application to publish
local on debug it is working well

Using this plugin in Ionic

Hi,

I am trying to use this plugin in an Ionic3 app but unfortunately the list of Countries is having 3 flags in each row, like this.

is there any workaround to fix this issue? Please help me to resolve this.

Preferred Countries list

It would be great if you can provide us an option to show some of counties on top of the list in drop down. There may be an option to pass array of preferredCountries[] which will be listed on top. Please see attachment.

Thanks in advance.

Doesn't work with Reactive form, need to be able to work with FormControlName

The filed "international-phone-number"

<international-phone-number> </international-phone-number>

is part of the big Reactive form and FormControlName need to be used to send data to the service, but it doesn't work.
Please, suggests workarounds if any.

question about style

i am trying to use it and it works fine but can you give us a bit more style option?

for example

currently the dropdown is centered and it takes a bit of space
can u do left align ?

also in mobile it goes like this..

i'm not sure how to do styling but if you can let me know how i can just try to apply css on this..

Text can be pasted in to Phone number field

In case if user copy some text and then click right mouse button on input and choose "Paste" (or Edit/Paste in browser menu) -> text will be added into "onlyNumber" field

country flag are not display in ios devices

country flag are not display in ios device in android works fine

country code clear out also it takes text in the input field.

Input also takes a text in the input field instead of numeric only.
When I cleared the phone number from the input, it also clears country code. Which actually should happen.

(copying) cmd + c doesn't work in the input

Hey,

just tried in my project and in this example - https://stackblitz.com/edit/angular-ngx-international-phone-number - copying doesn't work when you use shortcut cmd + c. Any idea why? Pasting and coping by using context menu works fine.

OS: macOs 10.14.5
browser: Chrome/76.0.3809.100

Dropdown-content problem when inside an expansion panel

If the component is placed inside an expansion panel , when the list is opened, half dropdown will be hidden (if the height is smaller than the dropdown content)

I was trying to change the z-index + position: absolute, but playing with this styles didn't change anything.

Material Angular manages the dropdown box in a different way (rendered outside the main "app-root" and avoiding the overflow problem)
https://stackblitz.com/edit/angular-r6ouax?file=app/expansion-overview-example.html

*Maybe another alternative solution can be a param/setting, that allows to change the orientation of the dropdown (for example, above the input, when there is not enough space below)

Input of type "tel"

Hello, I would like to know if it's possible to set the type of the input to "tel" instead of no type ("text" by default).
On mobile, the keyboard allows us to type letters (A-Z) and specials characters which is not valid for a phone number.
With the type tel, the keyboard only shows valid characters for phone numbers.
Thanks in advance.

Cannot read property 'dialCode' of null

If user start entering country code (but not all code, just like +3, country flag shouldn't appeared), then open dropdown with countries codes and choose any country from the list.

Expected Result: selected country code isn't applied. Error message in console - ERROR TypeError: Cannot read property 'dialCode' of null
Actual Result: user can select country code from drop-down list

Dependencies are not working

I have a problem with dependencies of this library. I see this error during angular app start.

ERROR in ./node_modules/ngx-international-phone-number/index.js
Module not found: Error: Can't resolve 'google-libphonenumber' in '/Users/jakob/volterra/volterra-ui-components/node_modules/ngx-international-phone-number'

In npm registry page there are no rendered dependencies, I think maybe release was broken or something like this. https://www.npmjs.com/package/ngx-international-phone-number

It can be fixed using explicit install of google-libphonenumber library.