1

I'm using ngx-intl-tel-input version 2.2.0 [compatible with Angular 7]. I have a page where it contains all the details of a person [such as, Firstname, Lastname, DOB, Address, Country, Telephone and so on]. So when I save a phone number together with the country code, it is being saved successfully. However, when reloading on the same page, the country flag does not display according to the telephone saved. I want to display the correct country flag based on the country code with phone number together saved.

For example, I set defaultcountry to 'CountryISO.Switzerland' in my code. Then I choose another country flag like 'France' and save a phone number [eg, +33123456789]. On page refresh, the telephone remains same but the flag become Switzerland instead of France. Please kindly advise how to fix this issue. My code is as follows:
in HTML component,

<ngx-intl-tel-input class="custom-intl-tel-input" [cssClass]="'custom'" [preferredCountries]="preferredCountries" [enableAutoCountrySelect]="false" [enablePlaceholder]="true" [searchCountryFlag]="true" [searchCountryField]="['iso2', 'name']" [selectFirstCountry]="false" [selectedCountryISO]="defaultCountry" [maxLength]="15" [tooltipField]="'name'" [phoneValidation]="true" name="phoneC" id="phoneC" (ngModelChange)="onChangeTelephone($event)" [ngModelOptions]="{updateOn: 'blur'}" [(ngModel)]="contact.telephone" #phoneC="ngModel"> </ngx-intl-tel-input>

in TS component,

this.preferredCountries = [CountryISO.Mexico]; this.defaultCountry = [CountryISO.Switzerland]; onChangeTelephone(event) { // save international number +33123456789 }


Thank you very much

KavyaArya
  • 41
  • 7

1 Answers1

0

I sending on back 3 parametrs : countryCode, countryISO(toLowerCase()), phoneNumber. And when i get this parametrs from back my countryISO is flag now.

//it's number from back
public phoneNumber: any;
//it's for ex 'af' 
public selectedCountryISO: any;

phoneNumber: new FormControl(this.phoneNumber, [
  Validators.required
]),

contact.phoneNumber = data.value.phoneNumber.number;
contact.countryCode = data.value.phoneNumber.dialCode;
contact.countryISO = data.value.phoneNumber.countryCode.toLowerCase();

html

[selectedCountryISO]="selectedCountryISO"
Alexandra Kartashova
  • 1
  • 1