Dynamically Format Phone Numbers by Country in Kendo UI for Vue Native MaskedTextBox

Updated over 6 months ago

Environment

Product Version	5.2.0
Product	Progress® Kendo UI for Vue Native

Description

How can I dynamically format a phone number based on a country code selected from a DropDownList using the MaskedTextBox?

Solution

1. Define a list of countries with their corresponding phone number masks and prefixes:

jsx

  const countries = [
    { name: 'Andorra', code: '🇦🇩', mask: '000-000-000', prefix: '+376' },
    { name: 'Germany', code: '🇩🇪', mask: '0000-0000000', prefix: '+49' },
  ];

2. Handle the onChange event of the DropDownList to update the selected country and mask format:

jsx

  methods: {
    handleCountryChange(event) {
      this.selectedCountry = event.target.value;
      this.mask = this.selectedCountry ? this.selectedCountry.mask : '';
      this.value = '';
      this.formattedValue = '';
    },
  },

3. Handle the onChange event of the MaskedTextBox to update the input value, apply the mask format and dynamically format the phone number:

jsx

  methods: {
    handleOnChange(event) {
      const newValue = event.target.value;
      this.value = newValue;
      const cleanValue = newValue.replace(/[^0-9]/g, '');
      if (this.selectedCountry) {
        this.formattedValue = `${this.selectedCountry.prefix}${cleanValue}`;
      } else {
        this.formattedValue = newValue;
      }
    }
  }

Change Theme

Theme

Loading ...