vantezzen / auto-form

🌟 A React component that automatically creates a @shadcn/ui form based on a zod schema.
https://vantezzen.github.io/auto-form/
2.27k stars 81 forks source link

Select Component eum with custom data limitation #60

Open nikolaischunk opened 4 months ago

nikolaischunk commented 4 months ago

Thanks first of all for creating this awesome project! While trying to integrate autoform into a project of mine, I came across a limitation of the select field.

The Problem

I have some data from a api that gets fetched on pageload with custom data. It looks something like this:

const users = [{
id: '123',
name: 'hello'
},
{
id: '789,
name: 'world'
}]

I want to display the name of the field in the select menu, and when submitting it should pass the id.

label = name value = id

In the docs I found this sentence:

// Keep in mind that zod will validate and return the enum labels, not the enum values!

I am not sure why this is, but this seems very unintuitive, especially when working with values that are not just simple 'one value' enums.

Solution?

Is there a way to work around this? Or even improve the Code to allow for the value to be validated not the label? Or using a different (custom) datatype, an array of objects with label & value attributes for example