spz-phonenumber

If you want display country or province, you can use spz-area, and spz-phonenumber set visible-id, visible-rule attribute, and spz-phonenumber add action input to update spz-area.

If you want display country flag, you can use spz-render, and spz-area add action to rerender in spz-render.

<spz-phonenumber
  id="phone-number"
  layout="container"
  visible-id="phone-area-container"
  visible-rule="[\+0-9\(\).\s-]+"
  default-country="countryCode"
  default-phone="countryPhoneArea"
  @input="phone-area.update(code=event.code);"
  keep-chart
>
  <input
    class="form__input"
    id="phone"
    name="phone"
    type="text"
    tabindex="1"
    required
    pattern="[\+0-9\(\).\s-]+"
    @input-debounced="form-tips.toggleClass(class='form-tips-visible', force=false);"
    @change="order-view-form.insert(name='email', value=event.value);order-view-form.insert(name='phone', value=event.value);"
  >
  <label class="form__label" for="phone">Phone</label>
</spz-phonenumber>

<div id="phone-area-container" class="flex items-center" hidden>
  <spz-area id="phone-area" src="script:phone-area-json" @areaChange="phone-number.update(data=event.data);" @update="phone-nation-flag.rerender(data=event.data);" layout="container" areacode>
    <select>
      <option empty value disabled>*</option>
    </select>
  </spz-area>
  <spz-render id="phone-nation-flag" layout="container">
    <template>
      <div>
        <!-- ... -->
        <div class="flag" style="background-image: url(${data.flag});"></div>
      </div>
    </template>
  </spz-render>
</div>

Display the country and flag parent element by visible rule, such as [\+0-9\(\).\s-]+

The id of the country and flag parent element.

Default country code When the phone number does not match the country code.

Default phonenumber When the country code does not match the phone number.

If this attribute is present, remove () or - for validation.

update(data=<Object>)

The update action updated phone code and format phonenumber

The following spz-phonenumber events trigger on input when they’re input

The input event triggers the targeted spz-phonenumber input to change . change data is countryCode example . @input="phone-area.update(code=event.code);"