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

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?

vue.jsvuejs2quasar-framework


Solution 1:[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>

Solution 2:[2]

Simply add

step="any"

and your input field can accept any decimals

<q-input
  outlined
  type="number"
  v-model="formData.amount"
  label="Amount"
  lazy-rules
  step="any"
  :rules="[
    (val) =>
      (val !== null && val !== '') ||
      'Please type transaction amount',
  ]"
/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shoejep
Solution 2 Jeremy Caney

Related Questions