vue-tel-input icon indicating copy to clipboard operation
vue-tel-input copied to clipboard

Setting value from outside in international format

Open TheGreenAirplane opened this issue 4 years ago • 2 comments

I am building a form that can be re-populated with values from the server, and each control needs to be able to take and display the values (values that don't come from user input). Problem is I emit the number in international format ("+1 234-567-8912") and the number that comes from the server is also in international format. I'm displaying the country code on the control. So if I set the value on the component through use of :value or v-model, I get this in the input box: +1▼ +1 (234)567-8912 i.e. the country code is duplicated. I need a way for the component to accept the number in international format and convert it to just the number without the country code.

TheGreenAirplane avatar Oct 15 '19 14:10 TheGreenAirplane

I managed to get this to work by modifying vue-tel-input.esm.js to export the awesome-phonenumber module: export { VueTelInput, install, PhoneNumber }; then I used it to get the national part of the number form the input:

 setInitialValue(val) {
          let p = PhoneNumber(val);
          this.number = p.getNumber('national');
          this.numberInternational = val;
      },

and I bound the value of the vue-tel-input to to the national number. This works, but it would have been nice to not have to modify the component itself. Maybe you could think about exposing the PhoneNumber object from your component?

TheGreenAirplane avatar Oct 16 '19 09:10 TheGreenAirplane

@TheGreenAirplane That's a good idea, I think we can do it in the next patch.

iamstevendao avatar Oct 17 '19 00:10 iamstevendao