webcat12345 / ngx-intl-tel-input

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

separateDialCode option bug when patching in Angular #334

Open vasco88 opened 4 years ago

vasco88 commented 4 years ago

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,

Dhaval187 commented 4 years ago

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

TylerOrtiz commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

vbonne commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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