Phone formatting

ComponentComposable

By default, VPhoneInput will format phone number on input blur event using national format. It will also emit phone number using e164 format on each input. Finally, examples displayed inside the phone labels will use national format.

Each of those formats can be customized to a valid PhoneNumberFormat using the appropriate properties or options:

• displayFormat will change the format used for inner phone input value (shown to the user)
• modelFormat will change the format used for internal phone input value (e.g. passed through v-model)
• exampleFormat defaults to displayFormat, and will change the format used for examples inside labels (e.g. invalid message)

app.ts

const vPhoneInput = createVPhoneInput({
  displayFormat: 'international',
  modelFormat: 'rfc3966',
  exampleFormat: 'international',
});

WARNING

Using a modelFormat which does not hold country dial code, such as national, will make your phone number string lose its country awareness. Prefer using another format if you are not storing the country aside, such as e164, rfc3966 or international.

Formatting after a delay

To disable on blur formatting, you can pass false to the displayFormatOnBlur property. When disabling on blur formatting, the phone number will be formatted after a fixed delay without any user input, which can be customized using displayFormatDelay (by default, 1000ms). You can also let displayFormatOnBlur enabled to combine both behaviors.

app.ts

const vPhoneInput = createVPhoneInput({
  displayFormatOnBlur: false,
  displayFormatDelay: 1000, // Default behavior when disabling on-blur formatting.
});

INFO

Passing a 0 delay will trigger phone number formatting on each input.

DANGER

Prefer using on blur phone formatting, because delayed formatting might format the phone while the user is still typing a phone number.

Disabling formatting

To disable any formatting, you can pass a null value to any formatting property (.

app.ts

const vPhoneInput = createVPhoneInput({
  displayFormat: null,
});