How to pass input value with country code.

[yacineblr]

same question

[georgenacouzi]

i am also facing the same problem, when passing the mobile number dynamically the country is not selected automatically, is there any way to get country from mobile or make the country code selected automatically if the mobile number is dynamically allocated ( not typed) i tried to use setNumber but it is not working

[gauravsoni119]

@ketchup208 , Can you share more details on this? It would be good if you share error details or a screenshot of the error?

[georgenacouzi]

@gauravsoni119 there is no error my html is as follows

<input 
  type="text" 
  ng2TelInput 
  [ng2TelInputOptions]="{initialCountry: country}" 
  (hasError)="hasError($event)" 
  (ng2TelOutput)="getNumber($event)"
  (intlTelInputObject)="telInputObject($event)" 
  (countryChange)="onCountryChange($event)" 
  value="{{mobileToDisplay}}"
  disabled 
/>

in my ts i have an api call, once data is received i am setting the value of mobileToDisplay example: +12025550121 the country is not changed to US and the country code +1 is displayed in the input.

i also tried to use setNumber in ts after data load but nothing changed without an error message.

telInputObject(obj) {
  obj.intlTelInput('setNumber', this.mobile);
}

[gauravsoni119]

@ketchup208 , With value, it's not working. I need to fix it.

[najibla]

Personally, the way I do it is as follows In the template in the input I have this output (countryChange)="countryChange($event)" And in the component I have the function that sets a class variable to the country code

  countryChange(country: any) {
    this.countryCode = country.dialCode;
  }

You can initialize that countryCode in the class to the code of your initialCountry that you set in the template like countryCode = 000 Then when you want to send to db:

sendToDB() {
    phoneValueToSend = '+' + this.countryCode + this.yourPhoneInputModel;
}

There probably is a better way that involves the intlTelInputObject.. I couldnt figure it out yet.

[HirenBypt]

@gauravsoni119 any progress in this yet?

[Coooi]

This is crazy hack but worked:

So, if you just want to change the flag based on the input value, the component itself already detects keyup events and sets the flag based on the dialCode (e.g. if you start typing "+49", it would set the German flag).

Based on that, if you set the input field programmatically, it will not detect this keyup event, so I decided to hack it.

This answer helped me how to do that: https://stackoverflow.com/questions/52626631/trigger-keyup-event-in-angular-5-typescript

Bind your input with ViewChild:

    @ViewChild('phoneInput')
    phoneInput: ElementRef;

Trigger a fake keyup event:

    setValue(): void {
      const phone = '+917878747416'
      this.form.setValue({phone: phone});
      this.phoneInput.nativeElement.dispatchEvent(
        new KeyboardEvent('keyup', { bubbles: true })
      );
    }

Worked out pretty smoothly for me.

I've answered the same thing on this thread: https://stackoverflow.com/questions/52626631/trigger-keyup-event-in-angular-5-typescript

[plvaldes]

    @ViewChild('phoneInput')
    phoneInput: ElementRef;

Trigger a fake keyup event:

    setValue(): void {
      const phone = '+917878747416'
      this.form.setValue({phone: phone});
      this.phoneInput.nativeElement.dispatchEvent(
        new KeyboardEvent('keyup', { bubbles: true })
      );
    }

Thanks for this code @Coooi , that works. I would also suggest faking a 'blur' event because that triggers the phone number validation.

I'm working on an ionic angular app where the telephone number can be imported from one of the contacts in the device... which could eventually be an invalid number. 'keyup' sets the flag and 'blur' runs the validation

[rajshiv169]

I have the same issue. I am using angular and in form, you can set the phone number with '+' and it selects the country but my requirement is how to change the flag based on countryCode like 'in' for India. As we set initialCountry. Is there any way?