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?
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/quasar@1.11.1/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>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',
]"
/>