Expose Initial Value about intl_phone_number_input

[natintosh]

Sorry for the inconvenience @abdulwahid24 and the sudden breaking change, I updated the package to support a new initial value property that accepts a PhoneNumber object, so you basically use setState on your initial value object reference

PhoneNumber number =
        await PhoneNumber.getRegionInfoFromPhoneNumber(phoneNumber, 'US');

    setState(() {
      this.number = number;
    });

[codekrafter]

This is currently doable with a text controller but it would be nice to have this be dedicated field to avoid the overhead of a text controller

[SpencerRiddering]

If I try to use the text controller method though, the phone number isn't formatted initially (no hyphens) by the form field. I don't see a way to utilize AsYouTypeFormatter for use when preparing my initial value list.

[codekrafter]

@SpencerRiddering I have the same issue

[bscottsmith]

You will need to call the formatter directly and set the text controller. Something like:

PhoneNumberUtil.formatAsYouType(phoneNumber: "5555551212", isoCode: "US").then((formattedPhone) => _phoneInputController.text = formattedPhone);

You would either do that in your initState(), or if it's stateless you could use a FutureBuilder to do it.

[Abhishek01039]

hii @bscottsmith when I set the textController to InternationalPhoneNumberInput then it will give me an error like texteditingcontroller was used after being disposed
I am not using the dispose method anywhere then also I am getting this error
because I want to give an initial value to InternationalPhoneNumberInput so I need to give textEditingController

[SpencerRiddering]

You will need to call the formatter directly and set the text controller. Something like:

PhoneNumberUtil.formatAsYouType(phoneNumber: "5555551212", isoCode: "US").then((formattedPhone) => _phoneInputController.text = formattedPhone);

You would either do that in your initState(), or if it's stateless you could use a FutureBuilder to do it.

For those following along at time, in order to do this you need to add package libphonenumber to your pubspec.yaml since PhoneNumberUtil is not exported by the intl-phone-number-input package.

[bscottsmith]

Yes @Abhishek01039, you hit issue #26. Luckily it was just patched :)

[natintosh]

For those following along at time, in order to do this you need to add package libphonenumber to your pubspec.yaml since PhoneNumberUtil is not exported by the intl-phone-number-input package.

You could call this static method

PhoneNumber.getParsableNumber

[SpencerRiddering]

I think this issue could benefit from a concrete example. Say I have the following phone number which I've persisted to my database: [phone]

When I go to display it using the InternationalPhoneNumberInput widget, I need to do two things:

1. Get the dial code (+1 in this case), figure out what the corresponding country ISO code is ('US'), and then set the initialCountry2LetterCode parameter with this value.

2. Format the remaining phone number (9162255887), and assign it to the initial value for the InternationalPhoneNumberInput widget. A formatted phone number in this case looks like this: 916-225-5887

Step one is easily done by PhoneNumber.getRegionInfoFromPhoneNumber(..)

Step two is not so easy. PhoneNumber.getParsableNumber('[phone]', '+1') produces: 9162255887 and so it's not a solution for step two. What is needed is to call PhoneNumberUtil.formatAsYouType(..) with the phoneNumber from PhoneNumber.getParsableNumber() and the country ISO code from PhoneNumber.getRegionInfoFromPhoneNumber(..). Here is an example:

    String originalPhoneNumber = '[phone]';
    PhoneNumber numberRegionInfo = await PhoneNumber.getRegionInfoFromPhoneNumber(originalPhoneNumber);
    String parsableNumber = PhoneNumber.getParsableNumber(originalPhoneNumber, numberRegionInfo.dialCode);
    String formattedNumber = await PhoneNumberUtil.formatAsYouType(phoneNumber: parsableNumber, isoCode: numberRegionInfo.isoCode);
    print(formattedNumber); // [phone]

This works in general, but has one issue: InternationalPhoneNumberInput formats dial code with a hyphen whereas PhoneNumberUtil.formatAsYouType(..) formats with parens.

916-225-5887 vs [phone]

Can someone explain why different formattings are produced? I seem to be using the same version of libphonenumber as intl-phone-number-input is (1.0.1)

[natintosh]

Oh, I grab what you are trying to say. I actually thought I implemented something like that I'll work on it.

This works in general, but has one issue: InternationalPhoneNumberInput formats dial code with a hyphen whereas PhoneNumberUtil.formatAsYouType(..) formats with parens.

916-225-5887 vs [phone]

For the difference in the format, I do not know the cause of that I'll check it out but I wrote a custom TextInputFormatter that uses the PhoneNumberUtil.formatAsYouType(..) >> Here

[natintosh]

Hi @SpencerRiddering, I think I finally know what's going on.

On the getRegionInfo for libphonenumber package,

  private void handleGetRegionInfo(MethodCall call, Result result) {
    final String phoneNumber = call.argument("phone_number");
    final String isoCode = call.argument("iso_code");

    try {
      Phonenumber.PhoneNumber p = phoneUtil.parse(phoneNumber, isoCode.toUpperCase());
      String regionCode = phoneUtil.getRegionCodeForNumber(p);
      String countryCode = String.valueOf(p.getCountryCode());
      String formattedNumber = phoneUtil.format(p, PhoneNumberUtil.PhoneNumberFormat.NATIONAL);

      Map<String, String> resultMap = new HashMap<String, String>();
      resultMap.put("isoCode", regionCode);
      resultMap.put("regionCode", countryCode);
      resultMap.put("formattedPhoneNumber", formattedNumber);
      result.success(resultMap);
    } catch (NumberParseException e) {
      result.error("NumberParseException", e.getMessage(), null);
    }
  }

on this line

String formattedNumber = phoneUtil.format(p, PhoneNumberUtil.PhoneNumberFormat.NATIONAL);

It uses the National format set by default.

While AsYouTypeFormatter doesn't have any specific format and its use both "-" and " " as its separator which is more like the International format form this link.

For the new changes you requested I am going to update the getParsableNumber to accepts two Strings phoneNumber and isoCode and return the formatted phoneNumber String

[SpencerRiddering]

Thanks @natintosh I think that will work for me.

I didn't mean to distract from the issue originally reported by @codekrafter regarding the desire for an initial value parameter to the InternationalPhoneNumberInput widget. Example:

PhoneNumber initialPhoneNumber = PhoneNumber('[phone]');
InternationalPhoneNumberInput(
    initialValue: initialPhoneNumber,
    ...
)

initialCountry2LetterCode wouldn't be required in this case since it's already contained within the PhoneNumber object.

[natintosh]

Hi guys I just published an update thank you for your contributions 👍

[abdulwahid24]

@natintosh I highly appreciate your contribution, I upgraded with the latest package but I couldn't figure out how can we set initialValue because previously I was setting on the text controller.

PhoneNumber.getRegionInfoFromPhoneNumber(widget.needy.phone).then((phoneNumber){
      setState(() {
        phoneText.text = phoneNumber.parseNumber();
      });
    });

But now, I am facing issue as in edit form, When open the form the phone field with valid phone number shows invalid.

[abdulwahid24]

Okay, Let me try out this.

[abdulwahid24]

Thank a ton @natintosh, It worked now. I was struggling for a few hours.

[abdulwahid24]

@natintosh I found the same issue on opening a new empty form, as it shouldn't validate initially without typing anything in the phone field.

[abdulwahid24]

Also, the phone field gets clear after toggling a dialog popup.

[abdulwahid24]

I fixed the issue by putting a

textFieldController: phoneText,
ignoreBlank: true,

[b02505048]

Sorry for the inconvenience @abdulwahid24 and the sudden breaking change, I updated the package to support a new initial value property that accepts a PhoneNumber object, so you basically use setState on your initial value object reference

PhoneNumber number =
        await PhoneNumber.getRegionInfoFromPhoneNumber(phoneNumber, 'US');

    setState(() {
      this.number = number;
    });

Hi @natintosh, I saw your example, the phoneNumber is a fixed number.
My question is how to retrieve the phoneNumber from user input and use it in PhoneNumber.getRegionInfoFromPhoneNumber(phoneNumber, 'US'), your help will be appreciated!!! Thank you!!