tanansatpal / ngx-mat-intl-tel-input Goto Github PK

Masking is not working.

It would be cool to have an online demo (on Codepen or Stackblitz or self-hosted) to preview the component and play around with it.

"dependencies": {
"@angular/animations": "^8.1.0",
"@angular/cdk": "^7.3.7",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/flex-layout": "^7.0.0-beta.22",
"@angular/forms": "~7.2.0",
"@angular/http": "^7.2.15",
"@angular/material": "^7.3.7",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@syncfusion/ej2-angular-charts": "^17.1.49",
"angular-user-idle": "^2.1.4",
"angular2-cookie": "^1.2.6",
"angular2-highcharts": "0.5.5",
"angularx-qrcode": "^1.6.1",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"libphonenumber-js": "^1.7.18",
"ng-animate": "^0.3.4",
"ng-connection-service": "^1.0.4",
"ng-recaptcha": "^5.0.0",
"ng2-tel-input": "^2.0.1",
"ngx-image-cropper": "^1.3.11",
"ngx-mat-intl-tel-input": "^2.0.0",
"ngx-progressbar": "^2.1.1",
"pusher": "^2.2.0",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.5.2",
"socket.io": "^2.2.0",
"socket.io-client": "^2.3.0",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.1",
"zone.js": "~0.8.26"
}
}

I am getting this error in the console after running the npm update command

Hi,

When an invalid phone number is entered and then the focus is removed, the label of the input doesn't stay on the top border, it goes back to its original place (middle of the input)

Is there a way to keep the label at the top (on the border) even if the value of the input is invalid?

Thanks.

on select country flag with empty phone field value it returns an error on console.

ERROR TypeError: "this.phoneNumber is null"
_getFullNumber ngx-mat-intl-tel-input.js:594
onPhoneNumberChange ngx-mat-intl-tel-input.js:649
onCountrySelect ngx-mat-intl-tel-input.js:656

There are a few fixes that have been merged to master in the last few weeks that solve some of the issues in my current project. At the moment I'm referencing master directly, but I'd prefer to just use the latest version. If possible, it would be nice to see a new release so it can be installed via npm.

The placeholder parameter is missing in the input.

Ex:

<input matInput type="tel" autocomplete="off"
[ngClass]="cssClass"
(blur)="onTouched()"
(keypress)="onInputKeyPress($event)"
[(ngModel)]="phoneNumber"
(ngModelChange)="onPhoneNumberChange()"
[errorStateMatcher]="errorStateMatcher"
[disabled]="disabled" #focusable>

There should be a placeholder with param here.

Thanks

I have implemented the library but when I select a country code it's value is not getting selected. I have set the field as required.

The .mat-menu-panel that is opened with the country list, i need to style it so that it only shows a few countries, but i also have many other panels like that one, and there is no specific class to style it.
Having multiple phonenumbers on the same form also doesn't help because i can't use the Id either.

the only classes that i can see on that menu are : mat-menu-panel ng-trigger ng-trigger-transformMenu ng-tns-c217-265 mat-menu-after ng-star-inserted mat-elevation-z4 mat-menu-above

the control not getting reset after calling form.reset().
is there way to clear value from the control and reset it?

Is there a way to separate the country code and the number? Cheers.

How to make country dropdown searchable ?

Hi ! Thanks for your work, this library does the job pretty well. However, I think that the validation might be improved a little bit as mentioned in the title : when the control form becomes touched and dirty but the input value is null, the status remains invalid eventhough the control is not required, which thus prevents from submitting the form.

For any useful purpose, hereafter is how I use it in my HTML code:
<mat-form-field style="min-width: 300px;"> <ngx-mat-intl-tel-input name="mobileNumber" [enablePlaceholder]="true" placeholder="{{'common.table.mobile-phone' | translate}}" formControlName="mobileNumber" #mobileNumber> </ngx-mat-intl-tel-input> </mat-form-field>

This line appears to cause ng serve warning in latest version: Warning: Entry point 'ngx-mat-intl-tel-input' contains deep imports into 'c:/development/sds-nx/node_modules/libphonenumber-js/types'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

I notice that the control supports a boolean input for enableAutoCountrySelect. However, I do not see that it has any effect regardless of the value I specify for this input. What is it's status and intended purpose?

I had hoped that it would use some geolocaton service behind the scene to default the country to correspond with the user's present location.

`RROR in node_modules/ngx-mat-intl-tel-input/lib/ngx-mat-intl-tel-input.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (ngx-mat-intl-tel-input/lib/ngx-mat-intl-tel-input.module) which declares NgxMatIntlTelInputModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.`

Hi Team,

When I choose Iran country code +98. After choosing the country code when I enter digit of mobile number. It reset automatically after 5 digit but complete number have 9 digit.

I noticed that if US and Canada are options, the component does not know how to distinguish between the two country codes when initializing the input.

For example, if I select US, enter a valid number and submit. Then reset my form and initialize the value to the saved value. The input shows Canada as the selected country instead of US.

Is there anyway fix this?

Thank you

Hi am using this package in my application I need to remove the languages for country dropdown

ropdown

I've installed all dependencies, added styles to angular.json, and imported NgxIntlTelInputModule to app.module.ts. Is there anything else I'm missing?

I'm on Angular 7.2.16, and typescript 3.1.6.

this is after the Latest library 3.1.0.

1. If 'ngx-mat-intl-tel-input' is an Angular component and it has 'preferredCountries' input, then verify that it is part of this module.
2. If 'ngx-mat-intl-tel-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ng-left: 0;">
   Phone Number
   <ngx-mat-intl-tel-input [ERROR ->][preferredCountries]="['in', 'us']" [enablePlaceholder]="true" [enableSearch]="true"
   p")
   Can't bind to 'enablePlaceholder' since it isn't a known property of 'ngx-mat-intl-tel-input'.
4. If 'ngx-mat-intl-tel-input' is an Angular component and it has 'enablePlaceholder' input, then verify that it is part of this module.
5. If 'ngx-mat-intl-tel-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
6. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("l>Phone Number
   <ngx-mat-intl-tel-input [preferredCountries]="['in', 'us']" [ERROR ->][enablePlaceholder]="true" [enableSearch]="true"
   placeholder="Phone Number" name="phon")
   Can't bind to 'enableSearch' since it isn't a known property of 'ngx-mat-intl-tel-input'.
7. If 'ngx-mat-intl-tel-input' is an Angular component and it has 'enableSearch' input, then verify that it is part of this module.
8. If 'ngx-mat-intl-tel-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
9. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   <ngx-mat-intl-tel-input [preferredCountries]="['in', 'us']" [enablePlaceholder]="true" [ERROR ->][enableSearch]="true"
   placeholder="Phone Number" name="phone" formControlName="phone">")
   'ngx-mat-intl-tel-input' is not a known element:
10. If 'ngx-mat-intl-tel-input' is an Angular component, then verify that it is part of this module.
11. If 'ngx-mat-intl-tel-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("="col-sm-6" style="padding-left: 0;">
    Phone Number
    [ERROR ->]<ngx-mat-intl-tel-input [preferredCountries]="['in', 'us']" [enablePlaceholder]="true" [enableSearch]")

Country dropdown is not showing on right position. As i checked css the problem with is top position. I tried to produce the error on stackblitz but unfortunately even your example from github is not working there. Here is the screen shots of behaviour.

No CSS styles appear on the component.

When placed inside a form tag, the dropdown trigger will submit the form (the trigger button should have a type="button" attribute).

From the W3C spec:

• submit: This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

Thanks!

Hi,

With my current setup, there is no country displayed first when the control appears:

<ngx-mat-intl-tel-input [preferredCountries]="['pl']" [enablePlaceholder]="true" [enableSearch]="true" name="phone" placeholder="Phone" formControlName="phone"></ngx-mat-intl-tel-input>

when the user clicks on the left side of the control, he immediately gets to see a list of countries.
when the user clicks on the right, then all is fine, he can use the default country and input the phone number.

At the moment, it's a bit counter-intuitive that depending on which side the user clicks, he gets different response.
Is there an existing setting that would, by default redirect the input focus to telephone number, on the entire control?

Thanks

I've migrated to Angular 10, and from what I can see this component works fine.

Could you update the peer dependencies to reflect that ? Thank you !

npm WARN [email protected] requires a peer of @angular/common@~9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@~9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/forms@~9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/platform-browser@~9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/platform-browser-dynamic@~9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of tslib@^1.10.0 but none is installed. You must install peer dependencies yourself.

For a multilingual application, I would need to translate the country names according to the user's language (de, fr, it, en). Is there a way to do this (e.g. using i18n-iso-countries) or is it planned to support i18n?

The input resets on 8 digits that is before it gets to the complete Nigerian mobile number which is 11 digits

So I did a little edit on the ngx-mat-intl-tel-input.js file to fix this

 if (numberInstance.nationalNumber.length > 10) {
     return error;
    }
    if (numberInstance && !numberInstance.isValid()) {
        if (numberInstance.nationalNumber.length > 10) {
            return error;
        }

Hello,

I'm facing an issue when I have a phone number which its country code is not listed on the onlyCountries array, it breaks the page and throws the following error:

ERROR TypeError: Cannot read property 'flagClass' of undefined
    at Object.eval [as updateDirectives] (NgxMatIntlTelInputComponent.html:3)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
    at checkAndUpdateView (core.js:44271)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)
    at callViewAction (core.js:44637)

I understand that if the country code is not present on onlyCountries, the flag is not found, although IMHO it should return a "non-country" image, like a placeholder instead of throwing an error and prevent component to keep working as expected

When used multiple times there is a element id conflict in dom.

I'am changing input field value and I'am deleting this value. But form field invalid still. Can you please update? Or can you share the onChange function to see if it's empty

Hi,

Is there a way to be able to set placeholder on input field?

getting 0 in display.
There is +91 so no requirement of 0 in number.

Having a List of Users for example with multiple instances of the ngx-at-intl-tel-input is showing a problem if i set the prefferedCountry to 'us' for example, and then i have a phonenumber that comes on my form that is from us, i will have the prefferedCountry US and the current number flag being a duplicate.

<mat-card class="contacts-section" class="container border mb-4 p-3" formArrayName="contacts"
*ngFor="let contact of contacts; let i = index;" style="margin-bottom: 10px;">
<div [formGroupName]="i" fxLayout="column" fxLayoutAlign="center none" >

<ngx-mat-intl-tel-input formControlName="phone"
[ngClass]="{'country-disabled':checkBtr()}"
[preferredCountries]="preferredCountries"
[placeholder]="'Phone Number'"
[enablePlaceholder]="true"
[enableSearch]="true" name="phone" #phone>

<mat-error *ngIf="contact.controls.phone.status === 'INVALID'">Invalid Phone Number

https://www.loom.com/share/366081c3987844bc9b7d53cec8f028aa

I may miss something, but I don't see any option to format the number on display. This make the readibility uneasy.

Could we have the option to see it as a formatNational inside the input ?

Morning. Is there some way to providing my own styles to the mat-menu? I see only way: ::ng-deep which is deprecated now, and also (in my case) affects other mat-menu's.

I think it's not good to hardcode this styles so i guess you can wrap all the insides of the mat-menu with some tag (e.g. ng-contaner), and set class to it from the Input.

Example:
https://stackblitz.com/edit/ngx-mat-intl-tel-input-demo-d56xoc

In the attached stackblitz, the form is initialized in a service, and the component uses OnPush.

There are 2 inputs in that form. The phone input is not populated, and the other one is populated.

I couldn't exactly reproduce the issue I have in my app, where only the country code is not populated when the page loads, and when clicking the second input, it causes the country code part to be selected.

Hi! Thanks for this Lib!

Can you guys check if the Flags are missplaced only here ?

Thanks Again!

The code that formats the number as you type NgxMatIntlTelInputComponent.prototype.onPhoneNumberChange and the code that displays the number when its pulled form storage NgxMatIntlTelInputComponent.prototype.writeValue
both display the number using .formatNational This results in the country code displaying first followed by the number formatted nationally. the problem with this is that some numbers are different once you add the country code.
ie:
In Slovakia you would dial +421 212345678 when calling internationally .
However you would dial 02/12345678 when calling locally. A zero is added in front of the number ONLY when you dial within the country.
With the current code the Slovakia number would be display as +421 0212345678. The code adds a zero at the front of the typed number because its formatted nationally. But if anyone tried to dial this number it would not work!!! So if a person who was using this number from the input field (not the stored number) didn't know this they wouldn't understand why it wasn't working. It does store correctly. But it does not display correctly.
This is the change I made to get it to display properly. I format the number using .formatInternational and then added a variable that contains the length of the the + and the area code. Then I remove that number of characters from the front of the number before its displayed. It only effects the displayed value. Not the stored value.
I added the NgxMatIntlTelInputComponent.prototype.editInternational function. The other two function can be found in the ngx-mat-intl-tel-input.js file.

       NgxMatIntlTelInputComponent.prototype.editInternational = function (){
         let cCode = '+' + this.numberInstance['countryCallingCode']
         this.phoneNumber = this.phoneNumber.substr(cCode.length)
       }

        NgxMatIntlTelInputComponent.prototype.onPhoneNumberChange = function () {
        try {
            this.numberInstance = parsePhoneNumberFromString(this._getFullNumber());
            this.value = this.numberInstance.number;
            if (this.numberInstance && this.numberInstance.isValid()) {
               this.editInternational()
        }
        catch (e) {
            // if no possible numbers are there,
            // then the full number is passed so that validator could be triggered and proper error could be shown
            this.value = this._getFullNumber();
            this.editInternational()
                
        }
        
        this.propagateChange(this.value);
    };


        NgxMatIntlTelInputComponent.prototype.writeValue = function (value) {
        var _this = this;
        // when form is reset
        if (value === null) {
            this.reset();
        }
        if (value) {
            this.numberInstance = parsePhoneNumberFromString(value);
            if (this.numberInstance) {
                var countryCode_1 = this.numberInstance.country;
                this.phoneNumber = this.numberInstance.formatInternational();
                this.editInternational()

                if (!countryCode_1) {
                    return;
                }
                setTimeout(function () {
                    _this.selectedCountry = _this.allCountries.find(function (c) { return c.iso2 ===countryCode_1.toLowerCase(); });
                    _this.countryChanged.emit(_this.selectedCountry);
                }, 1);
            }
        }
    };

There may be a better fix but this is what I figured out quickly.

I need to restrict the mobile number count based on selected country
For example I am selecting India It won't allow the user to enter more than 10 character

I'm using this as part of an information form that can be filled out, then saved, then edited. So i need a way to have a saved number populate the input field not the placeholder. Because if they save the form with an imputed phone number the next time they save the form if they dont fill in a new number the field will be blank and it will overwrite the phone number that was stored with a null.

Also, When you enter in a phone number, if you go 1 number over the validated amount it erases the entire number. Which is very frustrating to have to retype it if I accidentally type one number to many. It already shows red if its an invalid number, so I don't need it to erase the entire thing.
If I leave the field then go back to edit the number I imputed it erases the entire number. Id like to get ride of that too.

Also, I want to save the number in the formatted version it shows me after I type in the whole number. But the save function just gives me the number in its raw formatted version. Is there a way to access/save the number in its formatted version?

Hi,

Is there anyway to restrict the max length of input?

I noticed that validation breaks after entering a lot of characters.

For example :

6023346543 is valid US number - correct

60233465433 is invalid US number - correct

602334654332223345 is some how valid - not correct

Is there anyway of restricting max input to like 15 or x amount of digits?

Thank you

I've used in my angular project. I don't set default value.
And error
ERROR TypeError: Cannot read property 'country' of undefined
at NgxMatIntlTelInputComponent.push../node_modules/ngx-mat-intl-tel-input/fesm5/ngx-mat-intl-tel-input.js.NgxMatIntlTelInputComponent.writeValue (ngx-mat-intl-tel-input.js:693)
at setUpControl (forms.js:2057)

hi,
could you give it compatibility with angular 11?.

Regards.

using the ngcc compilation throws error at NgxMatIntlTelInputModule module imports:

relates to updating to project Angular 9