[V4] How to have a numeric input field? (Quasar)

[Sjoerd82]

Beginner here. I can't seem to get the basics right. I'm trying to have a numeric input field.
I'm using Quasar (Vue 3) with Zod. I based this on the provided Quasar example.

When entering a number in a qinput, it's treated as text instead, so I get:

Expected bigint, received string

            <Form :validation-schema="validationSchema" @submit="onSubmit">
                <Field name="test_id" v-slot="{ errorMessage, value, field }">
                    <q-input
                        type="number"
                        :model-value="value"
                        label="ID"
                        v-bind="field"
                        :error-message="errorMessage"
                        :error="!!errorMessage"
                    />
                </Field>
            </Form>

I would have set v-model.number, but I think we must use the model-value here.
I'm not sure if this is a Vue, Quasar, or vee-validate issue. But I recon this is the place with the experience to get this to work :-).

    const validationSchema = toFormValidator(
        z.object({
            test_id: z.bigint(),
        })
    )

Tip: Perhaps extend the Quasar example with a numeric input as well?

[logaretm]

Moved this to Q&A discussions since it is not an issue with vee-validate.

The number input usually doesn't emit number values, but rather numeric strings. You could use a zod.preprocess to cast it.

z.object({
  test_id: z.preprocess((val) => Number(val), z.number()),
})

[Sjoerd82]

Hmm, that's not very satisfactory, as that would require a preprocess() to all numbers in my (fairly large) schema (or at least the ones that have a form input somewhere). Also this should not be a concern of the schema.

As I explored the Vee-Validate documentation, I learned that there are two root approaches, the "Higher Level Component"-route, as per example, and the composition API-route. The latter seems to provide a more flexible approach. This works mostly:

<form>
    <q-input
        name="test_id"
        v-model.number="test_id"
        :error-message="errors.test_id"
        :error="!!errors.test_id"
    />
</form>

(a type="number" could be added for stricter input regulation, but I left it out here to demonstrate the validation)

With the following script:

<script setup lang="ts">
    import { Test } from '../../model/test'
    import { useField, useForm } from 'vee-validate'
    import { toFormValidator } from '@vee-validate/zod'

    const validationSchema = toFormValidator(Test)
    const { handleSubmit, errors } = useForm({
        validationSchema,
    })
    const { value: test_id } = useField<number>('test_id')
</script>

The Test-schema:

export const Test = z.object({
      test_id                   : z.bigint().or(z.number())
    , test_string               : z.string().max(50).optional()
    , test_bool                 : z.boolean().default(false)
})

There are two things still that nag me a bit:

• Vee-Validate gives me an error that the input must be bigint, but a number is entered. This is a bit silly, as a number is just a subset of a bigint. Can be fixed by specifying: z.bigint().or(z.number()) on the schema. A future improvement perhaps to not error on this? or is there a good reason for it?
• The Typescript type of the exported test_id is unknown, unless explicitly specified. But surely there's a way to infer the numeric type as it is derived from the Zod schema?

Unless I'm mistaken here, but the <Field>-component seems to not be ideal for QInput, unless you only have string fields.
If true, perhaps update the Quasar example for that. Would help starters like me ;-).

Excuses that it took me a while to respond, I had some other things going on, and needed some time to dive deeper into Vee-Validate.

[logaretm]

Vee-Validate gives me an error that the input must be bigint, but a number is entered.

Vee-validate never generates errors on its own, that's zod which is strict about value types.

The Typescript type of the exported test_id is unknown, unless explicitly specified. But surely there's a way to infer the numeric type as it is derived from the Zod schema?

This will be added once #4064 is released, just working on last changes and docs.

[logaretm]

Unless I'm mistaken here, but the -component seems to not be ideal for QInput, unless you only have string fields.

That depends on your use-case the examples are not meant to cover all use-cases for these frameworks. I think there should be way to handle these frameworks using v-model directly which I'm considering and thinking about to avoid all these issues.

[Sjoerd82]

Thanks for the clarification and subscribed to #4064