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

Question

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?

Answer 1

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.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>

<div id="app">
  <div class="q-pa-md" style="max-width: 300px">
    <div class="q-gutter-md">
      <q-input
        filled
        v-model="number"
        label="1 decimals"
        mask="#.#"
        fill-mask="0"
        reverse-fill-mask
        hint="Mask: #.#"
        input-class="text-right"
      ></q-input>
    </div>
  </div>
  
  Number is {{number}}
</div>