Setting customValidate in vue-tel-input hung my page deadly

[PetroGromovo]

Hello, I added https://github.com/EducationLink/vue-tel-input to my bootstrap-vue project and looking at customValidate property I want to make validation to phone number like “(123) 456-7890”. I suppose that customValidate is javascript regex validation and googled this https://stackoverflow.com/questions/4338267/validate-phone-number-with-javascript branch I try several methods from it, like :

My regex of choice is:

/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im

But setting this property :

        <vue-tel-input
                :onCountryChanged="countryChangedEvent"
                :preferredCountries="['AU', 'BR']"
                :onlyCountries="['AU', 'BR', 'UA']"
                :enabledCountryCode="true"
                :defaultCountry="'AU'"
                v-model="phone"
                :selectedCountryCode="true"
                autocomplete="off"
                name= "telephone"

                :custom-validate="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im"
                wrapperClasses="m-4 p-4"
                inputClasses="w-full"

                :maxLen="25"
                mode="international"
                :disabledFetchingCountry="false"
                :disabled="false"
                :disabledFormatting="false"
                :placeholder="'Enter a phone number'"
                @onClose="onClose"
                @onInput="onInput"
        ></vue-tel-input>

my page hung deadly

I tried some more regex samples with the same results. Is it invalid format or I need some wrapper ?

    "bootstrap-vue": "^2.3.0",
    "vue": "^2.6.11",
    "vue-tel-input": "^4.4.0",

Thanks!

[Chup4Chups]

I am experiencing the same issue

[PetroGromovo]

I got some hints here : https://forum.vuejs.org/t/setting-customvalidate-in-vue-tel-input-hung-my-page-deadly/99926/2 But it did not help me...

[Hasnain-js]

You pass the props value like this :custom-validate="phoneValue === '' ? false : /^[0-9]+$/". Make sure your value cannot be null or undefined when your component is mount.

[gentlekenny]

The issue you are experiencing is because when the component is mounted, the initial value of your phone number field is empty. Add into your regex possiblity that it can be empty ^$ and you should be fine