logaretm / vee-validate

✅ Painless Vue forms
https://vee-validate.logaretm.com/v4
MIT License
10.81k stars 1.26k forks source link

Composable for Validation Schema access in Child Components #4496

Open dmckeone opened 1 year ago

dmckeone commented 1 year ago

Is your feature request related to a problem? Please describe.

Easier use of validationSchema in child Component

Describe the solution you'd like

const schema = useFormValidationSchema()

More details in stackblitz here: https://stackblitz.com/edit/vee-validate-v4-radio-h7gkvx?file=src%2FApp.vue,src%2FCustomInput.vue

Marked with:

// FEATURE: Extract schema parts
// const schema = useFormValidationSchema();

It would be nice to have access to the schema in the child components so that the schema shape (at least for Zod) can be extracted for adding additional validation information to an interface.

The Stackblitz above extracts the minimum string length from the Zod schema, indexed by field name, as an example

Describe alternatives you've considered

Passing props does currently work, it's just a lot of duplication for a number of fields.

logaretm commented 1 year ago

There have been talks of exposing certain information about individual fields using TypedSchema concept. Like extracting if a field is required, if it has a min/max length which would be nice to have.

Exposing the entire schema can be done user land with provide/inject. So I think vee-validate will try to implement the required/min/max querying system for each schema provider (yup/zod/valibot) if supported.

No ETA on that, I will need to find time to work on this.

dmckeone commented 1 year ago

Provide/Inject totally works in the mean time, thanks for that suggestion.

I also like the idea of the abstraction over common field validations.

I think this may still have value on its own as an escape hatch for features only available on specific schema libraries. An abstraction over many libraries will inevitably have to follow the lowest common denominator of features, and will also lag the features being introduced in the schema libraries themselves.

As you said, its really just a provide/inject convenience for the user, but if its in vee-validate then its a common provide/inject for all projects, rather than a one-off with different provide names in each project.