separateDialCode option bug when patching in Angular

[vasco88]

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?

Regards,

[Dhaval187]

Hi
We are also facing same issue
Country/dial code is displayed in input field

[TylerOrtiz]

I'm also seeing the same exact problem.

Separating dial code from the input is desirable (who wants to enter their own dial code?).

[pasevin]

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.

[pasevin]

I'm also seeing the same exact problem.

Separating dial code from the input is desirable (who wants to enter their own dial code?).

This is misleading, as you don't have to enter your own dial code in neither case (separateDialCode=true/false).

[BlackTafita]

Hi) Have the same issue.
Any info when it will be fixed?

[vbonne]

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

[Crocsx]

I have the same problem but with the core library, I don't think this wrapper is the issue.

EDIT : I was wrong, my issue was with [(ngModel)]="phoneNumber" removing this line from my code and letting the library fully handle the input (but you will need to bind some event manually) fixed it for me. maybe something to look into in this lib

[rene-guerrero]

I used this snippet as a workaround. Using a setter you can detect when the value it's going to be changed and then perform an update to the input value with updatePhoneInput

  _valueAsPhone: any;
  set valueAsPhone(value) {
    if(value?.number && !this.initialPhoneValueSetted){
      this.updatePhoneInput(value);
    }
    this._valueAsPhone = value;
  }
  get valueAsPhone(){
    return this._valueAsPhone;
  }
  initialPhoneValueSetted = false;

  updatePhoneInput(value){
    const input = $(`#${this.phoneInputId}`);
    if(input && value?.number){
      if(input.val() != value?.number){
        input.val(value?.number);
        this.initialPhoneValueSetted = true;
      }
    }
  }

[aponski]

I also need country code to be removed from phone number if separateDialCode is set to true.