Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

separateDialCode option bug when patching in Angular

See original GitHub issue

Hi,

I’m using this function in roder to patch values to a form in Angular:

          this.detailedDataForm.patchValue({
            'whatsapp_agente': this.currentAgentDetailedData.whatsapp_agente, 
            'telefono_agente': this.currentAgentDetailedData.telefono_agente, 
            'skype_agente': this.currentAgentDetailedData.skype_agente,
            'molestar_agente': this.currentAgentDetailedData.molestar_agente,
            'texto_agente': this.currentAgentDetailedData.texto_agente
          });

            <ngx-intl-tel-input [inputId]="'telefono_agente'"
                                         [cssClass]="'form-control'" 
                                         [preferredCountries]="preferredCountries"
                                         [enableAutoCountrySelect]="false" 
                                         [enablePlaceholder]="false" 
                                         [searchCountryPlaceholder]="skype_agente_search_placeholder_text" 
                                         [searchCountryFlag]="true"
                                         [searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
                                         [selectFirstCountry]="false" 
                                         [selectedCountryISO]="CountryISO.Spain"
                                         [maxLength]="9" 
                                         [tooltipField]="TooltipLabel.Name" 
                                         [phoneValidation]="true" 
                                         [separateDialCode]="separateDialCode"
                                         name="telefono_agente" formControlName="telefono_agente">
            </ngx-intl-tel-input>

While whatsapp_agente is +34600000000 from database, when using separateDialCode=true, the dialCode is shown in the input field. Furthermore, it makes the validation number to be wrong.

Is it a bug or am I missing something else?

phone

Regards,

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:9

Top GitHub Comments

4reactions

vbonnecommented, Nov 1, 2020

Yes, this library doesn’t clean your phone numbers for you. So this is not a bug.

but before version 2.3.4 it was cleaning the number in the input field you can check with this stackbliz : stackblitz When changing the import in the package.json for ngx-intl-tel-input the behaviour changes. Starting with version 2.3.4 the country code is left in the input when it was correctly removed for versions 2.3.3 and before. I managed to revert to this version (2.3.3) in my projet in case this helps

3reactions

pasevincommented, Oct 17, 2020

Yes, this library doesn’t clean your phone numbers for you. So this is not a bug.

It does return an object which you can use to save data to your database or store:

{
  "phone": {
    "number": "4156 297 292",
    "internationalNumber": "+91 4156 297 292",
    "nationalNumber": "04156 297 292",
    "e164Number": "+914156297292",
    "countryCode": "IN",
    "dialCode": "+91"
  }
}

So when using separateDialcode option I would use phone.number to patch my fields (without dial code).

As I understand @vasco88, you only have numbers with dial codes and would like the library to recognize that automatically and clean it. I am not against it, but this would be a new feature.

Top Results From Across the Web

Why can't I patch the value into the form controls in angular?

I've tried to patch some of the values to the from control, but it is not showing. why? I'll share my code examples...

ngx-intl-tel-input - npm

An Angular package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's ...

Ngx Intl Tel Input Demo - StackBlitz

name = "Angular " + VERSION.major;. form: FormGroup;. isSubmit = false;. separateDialCode = false;. SearchCountryField = SearchCountryField;.

... this file aims to generate web-animations-compatible keyframes from Angular's ... updateValueAndValidity(options); }; /** * Patches the value of the ...

Stack Patching Policy

Four options · Continue using the officially released upstream version of hackage-security, bugs and all · Fork hackage-security on Hackage, and ...