-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Infer model type from schema when using defineField() #4808
Comments
it is possible that it is getting confused by the Can you create a minimal reproduction for this? |
@logaretm Probably this is happening because of incorrect typed import * as yup from 'yup';
import { useForm, type LazyInputBindsConfig } from 'vee-validate';
import { toTypedSchema } from '@vee-validate/yup';
const FormSchema = yup.object({
fieldOne: yup.number().required(),
fieldTwo: yup.number().required(),
});
const { defineField } = useForm({
validationSchema: toTypedSchema(FormSchema),
});
const vuetifyBindsConfig: LazyInputBindsConfig = (state) => ({
props: {
'error-messages': state.errors,
},
});
const [fieldOne] = defineField('fieldOne', vuetifyBindsConfig); // unknow
const [fieldTwo] = defineField('fieldTwo'); // number | undefined
// or
const [fieldOne] = defineField<'fieldOne'>('fieldOne', vuetifyBindsConfig); // number | undefined Problem is i don't know correct type for |
And there is another issue with import * as yup from 'yup';
import { useForm from 'vee-validate';
import { toTypedSchema } from '@vee-validate/yup';
const FormSchema = yup.object({
objectField: yup.object({
id: yup.string().required()
// ...
})
});
const { defineField } = useForm({
validationSchema: toTypedSchema(FormSchema),
});
const [objectField] = defineField('objectField');
// type error:
// <SomeFieldComponent v-model="objectField" />
// SomeFieldComponent.vue
defineModel<{
id: string
// ...
}>() |
Is your feature request related to a problem? Please describe.
I'm using typescript, yup,
toTypedSchema()
, and it works like a charm after getting used to values fromuseForm()
still having| undefined
types, but values fromonSubmit()
having the required type.The problem: the model that is returned from
defineField()
has typeRef<unknown>
.This is annoying when assigning it to components typed model:
Casting the type when passing it to the component works, but is not nice I guess. Especially if you use the model multiple times, you don't want to cast it every time. Also, my understanding is, that casting would not bring the benefits that I'm looking for from typescript.
The same goes for using the ref in code:
Similar when defining, for example, a boolean and using it in a v-if. It would be possible to use values.variableName, but why not use the model?
Especially because the type is defined in the schema:
After fiddling around a bit, I found out that adding the field's path to the generic type of
defineField()
does help to infer the proper type.Also in code the ref's type is inferred correctly:
Describe the solution you'd like
It would be nice if the model's type is inferred automatically instead of manually having to do it. Maybe I'm missing something, so I'm grateful for any hints.
Describe alternatives you've considered
Passing the field's path to infer the type from helps, but is redundant:
defineField<"pathToField">("pathToField")
The text was updated successfully, but these errors were encountered: