search

webcat12345 / ngx-intl-tel-input

Phone number input field to support international numbers, Angular
MIT License
213 stars 335 forks source link

Bug on United Kingdom number 7911 123456 #260

Open inchrvndr opened 4 years ago

inchrvndr commented 4 years ago

The underlying libphonenumber validates 7911123456 of United Kingdom to "true" while the stackblitz demo of ngx-intl-tel-input fails.

I've verified the same at http://libphonenumber.appspot.com/ Phone number : 7911123456 Default Country : GB ( CLDR two-letter region code)

pasevin commented 4 years ago

Looks like you're right. We are using the latest libphonenumber lib, so it's not coming from it. I traced this to another library which we rely upon: int-tel-input. https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/is-valid-number.html

To fix this we will need to update ngx-intl-tel-input to use the latest intl-tel-input.

The problem is that it breaks a lot of things in our library if just dropped in. It will take some time to look into this. If anyone can do this, PRs are welcome.

kapsrox commented 4 years ago

if you update with intl-tel-input latest version. you need to add prefix iti in classes which belongs to intl-tel-input I guess bold class placed with existing and issue will resolve (ngx-intl-tel-input/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html) `<div class="iti iti--allow-dropdown" [ngClass]="separateDialCodeClass"> <div class="**itiflag-container" dropdown [ngClass]="{'disabled': disabled}" [isDisabled]="disabled"> <div class="itiselected-flag dropdown-toggle" dropdownToggle> <div class="itiflag*" [ngClass]="selectedCountry?.flagClass" [tooltip]="selectedCountry ? selectedCountry[tooltipField] : ''">

<div ngIf="separateDialCode" class="selected-dial-code">+{{selectedCountry.dialCode}}

    </div>
    <div *dropdownMenu
        class="dropdown-menu country-dropdown">
        <div class="search-container"
            *ngIf="searchCountryFlag && searchCountryField">
            <input id="country-search-box"
                [(ngModel)]="countrySearchText"
                (keyup)="searchCountry()"
                (click)="$event.stopPropagation()"
                [placeholder]="searchCountryPlaceholder"
                autofocus>
        </div>
        <ul class="**iti__country-list**"
            #countryList>
            <li class="**iti__country**"
                *ngFor="let country of preferredCountriesInDropDown"
                (click)="onCountrySelect(country, focusable)"
                [id]="country.iso2">
                <div class="flag-box">
                    <div class="**iti__flag**"
                        [ngClass]="country.flagClass"></div>
                </div>
                <span class="country-name">{{country.name}}</span>
                <span class="dial-code">+{{country.dialCode}}</span>
            </li>
            <li class="divider"
                *ngIf="preferredCountriesInDropDown?.length"></li>
            <li class="**iti__country**"
                *ngFor="let country of allCountries"
                (click)="onCountrySelect(country, focusable)"
                [id]="country.iso2">
                <div class="flag-box">
                    <div class="**iti__flag**"
                        [ngClass]="country.flagClass"></div>
                </div>
                <span class="country-name">{{country.name}}</span>
                <span class="dial-code">+{{country.dialCode}}</span>
            </li>
        </ul>
    </div>
</div>
<input type="tel"
    [id]="inputId"
    autocomplete="off"
    [ngClass]="cssClass"
    (blur)="onTouched()"
    (keypress)="onInputKeyPress($event)"
    [(ngModel)]="phoneNumber"
    (ngModelChange)="onPhoneNumberChange()"
    [disabled]="disabled"
    [placeholder]="separateDialCodePlaceHolder(selectedCountry?.placeHolder || '')"
    [attr.maxLength]="maxLength"
    [attr.validation]="phoneValidation"
    #focusable>

`

reynirf commented 9 months ago

Any plan on updating this? There are multiple phone numbers that are invalid for this library because of an outdated version of intl-tel-input, which makes the package unusable in production.