Setting initialCountry in an empty phone ('') scenario

[eloyg]

I'm adopting this robust component in my A21 app with no major issues so far. The only problem I'm facing is that I could not get yet to set the desired initial country flag when there is no actual phone number, I mean, in the case that a form is rendered to the user for the very first time. The US flag is always being set by default.
I tried with setting [initialCountry] input param and also with calling native selectCountry(countryCode) method but neither worked. The only way I found to set the correct country flag is assigning dial code (i.e "+54") to the associated form control value, but that creates an undesired visual effect: the dial code shows twice during a fraction of time.
I also tried with calling selectCountry('AR') inside an AfterViewInit lifecycle hook with no results.
I'm using is latest version (1.6.9) and something that caught my attention is that some input parameters are not being recognized by Angular (i.e formatOnBlur).
I would appreciate any guidance on this problem. Thanks.

[eloyg]

thanks for your quick reply. Here my response:

1. initialCountry is bound as input parameter [initialCountry]="'AR'"
2. Initial form control value is ''
3. How could I check whether formatOnBlur exists in my installed package typings?
4. I'll try to provide StackBlitz repro shortly

[eloyg]

I searched for formatOnBlur on my entire node_modules folder and did not found any occurrence.

[toozuuu]

@eloyg thank you. We’re actively working on a fix now and will post an update here as soon as it’s ready.

[eloyg]

thank you @toozuuu . That would help a lot. We adopted ngxsmk-tel-input during our upgrade to A21. We were previously using ngx-tel-input. We deployed recently upgraded to A21 version to test env and QA team reported this issue.

[eloyg]

BTW, could you explain what you mean by calling selectCountry method after first rendering? this is what I understood:
ngAfterViewInit() { // Small tick to let the component finish its own init setTimeout(() => { this.telInput.selectCountry(this.countryCode); }, 0); }
but without succeeding. I'm not sure if this is what you meant. Thanks.

[toozuuu]

BTW, could you explain what you mean by calling selectCountry method after first rendering? this is what I understood: ngAfterViewInit() { // Small tick to let the component finish its own init setTimeout(() => { this.telInput.selectCountry(this.countryCode); }, 0); } but without succeeding. I'm not sure if this is what you meant. Thanks.

You understood it correctly.
ngAfterViewInit + setTimeout(..., 0) is a good try, but sometimes it still runs too early.

By "after first rendering," I mean after the component is fully initialized.
The safest way is:

• use [initialCountry] (fixed in v1.6.11 for empty '' values), or
• call selectCountry(...) after the component ready event.

Please update and try again:

npm i ngxsmk-tel-input@^1.6.11

Thank you again for the detailed feedback.

[eloyg]

It's working now. Thanks for your support!.

[toozuuu]

I'm adopting this robust component in my A21 app with no major issues so far. The only problem I'm facing is that I could not get yet to set the desired initial country flag when there is no actual phone number, I mean, in the case that a form is rendered to the user for the very first time. The US flag is always being set by default. I tried with setting [initialCountry] input param and also with calling native selectCountry(countryCode) method but neither worked. The only way I found to set the correct country flag is assigning dial code (i.e "+54") to the associated form control value, but that creates an undesired visual effect: the dial code shows twice during a fraction of time. I also tried with calling selectCountry('AR') inside an AfterViewInit lifecycle hook with no results. I'm using is latest version (1.6.9) and something that caught my attention is that some input parameters are not being recognized by Angular (i.e formatOnBlur). I would appreciate any guidance on this problem. Thanks.

@eloyg Thanks for reporting this and for the detailed repro notes.

This is now addressed in v1.6.11.
We fixed initialization so initialCountry is correctly applied when the control starts with an empty value (''), and updated related typing/export alignment.

Update

npm i ngxsmk-tel-input@^1.6.11

If possible, please retest with your Angular 21 setup and confirm whether the first-render country flag now behaves correctly in your flow.

Reference: Discussion #83