MaxLength for bootstrap-vue input number Vue.js

Question

I try to implement a maxLength for an input from bootstrap-vue, but from what I read from their documentation they don't support max. If I remove type="number", it works , but is not a number anymore.

    <b-form-input
        size="sm"
        v-model="register_volume_first"
        type="number"
        maxlength=4
        placeholder="1902"
    ></b-form-input>

Solution 1

Try to use formatter prop as follows:

<template>
  <div>
    <b-form-input size="sm" v-model="volume" type="number" :formatter="formatYear" placeholder="1902"></b-form-input>
       <div class="mt-2">Value: {{ volume }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
       volume: '4'
      }
    },
methods:{
  formatYear(e){
     return String(e).substring(0,4);
  }
}
  }
</script>

Solution 2

maxLength only refers for text types, i tried to do a test to see if min & max are supported and it seems so, please take a look:

new Vue({
  el: '#app',
  methods: {
    onSubmit(evt) {
      evt.preventDefault()
      console.log(evt)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">

  <b-form @submit="onSubmit">
    <b-form-input type="number" max="20" min="10"><min="10" required></b-form-input>
    <b-button type="submit" variant="primary">Submit</b-button>
  </b-form>

</div>

Keep in mind that the check for min & max is done when the form is submitted, with the required parameter of course.

EDIT : added form & submit to the snippet

EDIT 2: Without form submit

new Vue({
  el: '#app',
  methods: {
    onSubmit(evt) {
      evt.preventDefault()
      console.log(evt)
    }
  },
  data() {
    return{
      inputValue: 15
    }
  },
  watch: {
    inputValue(val){
      if(val < 10)
        this.inputValue = 10;
      else if(val > 20)
        this.inputValue = 20;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">


    <b-form-input v-model="inputValue" type="number" max="20" min="10" required></b-form-input>


</div>

Comments

[Beusebiu]

Ok, thanks, but I look for a way to not depend on submit.

[Adrian A]

@Beusebiu add a v-model to the input and watch it.

[Beusebiu]

Thanks, but in my case in not ok, the user will not use arrows to insert the number (year)

[Beusebiu]

I thanked about a watch, but I am not sure what write in it.

[Adrian A]

@Beusebiu i edited my answer, see if Edit 2 pleases you.

[Beusebiu]

Exactly what I needed! Thanks!

[Beusebiu]

I check it,but is not working. Is works just if I use the arrows.

[Adrian A]

@Beusebiu what tests did you do? for me it works fine even deleting the field and inserting values

[Beusebiu]

I tested in the snippet above. Sometimes replace the value with 10 or 20, but in some cases not, and in my case I must restrict user to type more than 4 characters. I found an answer above, thank you!

[Fritz]

Depending what input you are after, take into account that the letter e is a number...

[StevenV]

Your link to formatter-support is broken. It should be formatter-support