Allow only number with up to one decimal place in quasar input

Total
1
Shares

Is it possible using Quasar q-input to only allow integers and floating point number with only one decimal place? I tried using :decimals="1" and step="0.1" but it still allows me to type in any kind of number- so there is no form validation from what I see.

Is there a way, for example by using :rules param in q-input to allow only for integers and floats with one decimal point?


Solution

According to the documentation, you could do something with the mask prop. For one decimal place, I believe it would be mask="#.#"

I’ve included a snippet below which is a modified version of this codepen.

_x000D_

_x000D_

new Vue({_x000D_
  el: '#app',_x000D_
  data () {_x000D_
    return {_x000D_
      number: null_x000D_
    }_x000D_
  }_x000D_
})

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>_x000D_
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>_x000D_
_x000D_
<div id="app">_x000D_
  <div class="q-pa-md" style="max-width: 300px">_x000D_
    <div class="q-gutter-md">_x000D_
      <q-input_x000D_
        filled_x000D_
        v-model="number"_x000D_
        label="1 decimals"_x000D_
        mask="#.#"_x000D_
        fill-mask="0"_x000D_
        reverse-fill-mask_x000D_
        hint="Mask: #.#"_x000D_
        input-class="text-right"_x000D_
      ></q-input>_x000D_
    </div>_x000D_
  </div>_x000D_
  _x000D_
  Number is {{number}}_x000D_
</div>

_x000D_

_x000D_

_x000D_

Leave a Reply

Your email address will not be published. Required fields are marked *