Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blur event on pre-filled input makes the control invalid #468

Open
hirenchauhan2 opened this issue Sep 28, 2022 · 1 comment
Open

Blur event on pre-filled input makes the control invalid #468

hirenchauhan2 opened this issue Sep 28, 2022 · 1 comment

Comments

@hirenchauhan2
Copy link

hirenchauhan2 commented Sep 28, 2022

I have a form where I'm using this component for taking user's phone number. But, when I use this form for updating existing user details this is not working. All other values are pre-filled for user to update. I'm using a full object to populate the value for phone number instead of just the E.164 format string.

The function to convert string to phone number object looks like this:

getIntlTelInputPhoneNumber(phoneNumberStr: string) {
  const phoneNumber = phoneUtil.parseAndKeepRawInput(phoneNumberStr);

  const phone = {
    countryCode: phoneUtil.getRegionCodeForNumber(phoneNumber) || 'US',
    dialCode: '+' + phoneNumber.getCountryCode(),
    e164Number: phoneUtil.format(phoneNumber, PNF.E164),
    internationalNumber: phoneUtil.format(phoneNumber, PNF.INTERNATIONAL),
    nationalNumber: phoneUtil.format(phoneNumber, PNF.NATIONAL),
    number: phoneNumber.getNationalNumber(),
  };

  return phone;
}

And I use this function to patch value to phoneNumber control

// ...
if (this.user.phoneNumber) {
    const phone = this.getIntlTelInputPhoneNumber(this.user.phoneNumber);
    // this is used for setting the dynamic country flag from phone number
    this.selectedCountry = phone.countryCode.toLowerCase() as CountryISO;  
    this.userForm.get('phoneNumber')?.patchValue(phone);
    this.phoneNumberLoaded = true;
    // cd is ChangeDetectorRef
    this.cd.detectChanges();
  }
// ...

This shows the control filled with value
image

Now, when I just focus on the element and leave the input without modifying anything, I'm getting the error of invalid phone number.

image

Env:

"@angular/*": "~13.3.0",
"google-libphonenumber": "^3.2.30",
"intl-tel-input": "^17.0.3",
"ngx-intl-tel-input": "^3.2.0",
@hirenchauhan2 hirenchauhan2 changed the title Changing the country on pre-filled input makes the control value to null Blur event on pre-filled input makes the control invalid Sep 28, 2022
@hirenchauhan2
Copy link
Author

Upon further checking, I found that the control was already invalid, not sure what was the reason? When I check the the control by inspecting it without focusing on it, I can see it has all values in the object of value for control. Still not sure why it is behaving like that. Any idea what could be wrong?

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant