0 as first number in Vue model

Viewed 140

I am trying to put in a Dutch phoneNumber field in a form. But when I put in the first digit 0 it gets removed when I put in the second.

Dutch phonenumber: 06 + 8 digits (0612345678) or 0 + 2 digits (region code) + 7 digits (012 1234567) or 316 + 8 digits (31612345678).

<el-input
 v-model.number="form.phoneNumber"
 @keypress="isPhoneNumber(form.phoneNumber)"
 :placeholder="$t('phonenumber')"
></el-input>

with this as validator:

phoneNumber: [
 {
   required: true,
   type: "text",
   pattern: "^(?:0|(?:\+|00) ?31 ?06 ? )(?:(?:[1-9] ?(?:[0-9] ?){8})|(?:6 ?-? ?[1-9] ?(?:[0-9] ?){7})|(?:[1,2,3,4,5,7,8,9]\d ?-? ?[1-9] ?(?:[0-9] ?){6})|(?:[1,2,3,4,5,7,8,9]\d{2} ?-? ?[1-9] ?(?:[0-9] ?){5}))$",
   message: this.$t("please_fill_a_phonenumber"),
   trigger: "blur",
 },
],

Is there something obvious that I overlook?

1 Answers

Kindly, visit Official Vue.js Docs on How to Form Input Bindings? to find out the right way how to use the v-model directive and the modifiers. Because you're using a .number modifier. Also, visit Element Library's Official docs element.eleme.io that how to use el-form and el-input elements.

Related