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

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?

Bugs to fix: Australia and Azerbaijian shown twice in the dropdown. Also, if number is keyed in manually, wrong flag is shown e.g. typing in Aaland's country code shows another flag

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.

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!

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.

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..

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.

I put a defaultCountry to the component.
When i write a valid phone number the form is valid.
If i remove only the phone number without deletng the country, the component is invalid.

<international-phone-number class="inputSize" [(ngModel)]="correspondant.telephoneFixe" [allowDropdown]="true" [defaultCountry]="defaultCountryTelFixe" #telephoneFixeNumber="ngModel" name="telephoneFixe"></international-phone-number>

ngOnInit() { if (this.correspondant) { if (!this.correspondant.telephoneFixe) { this.defaultCountryTelFixe = 'nc'; } } }

When show the page for the first time, with default country --> validForm is OK

When write a valid phone number --> validForm is OK

When i remove the phone number --> validForm is KO

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)

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.

when i select the country or enter the country code maximum length of the phone number for that particular country does not work in ionic 3

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.

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

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.

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,

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.

Facing the empty tuple error. Appreciate if you could merge the latest commit to update the version, thanks! :)

How to style this input ?

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

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.

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.

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

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?

Agentina not show in the list of country

I want to show country flag and country code in dropdown after select in the dropdown and want to remove the countrycode in the place holder.

in IOS Device language is Arabic in that case this plugin not allowed to user to input.

User should be able to enter there local language number as per there keyboard.

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.

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

Following scope is for v2 version:

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

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.

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.

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

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?

It would be great if we could get more info on the form, like country info (country code, iso value, name...)

Apart from that, great work!

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.

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.

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

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>

After installing the library and importing the library to my module.

I get the below error.

ERROR in Debug Failure. False expression.
i｢wdm｣: Failed to compile.

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

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?

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.

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.

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

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