ciscoheat / sveltekit-superforms

Making SvelteKit forms a pleasure to use!
https://superforms.rocks
MIT License
2.22k stars 66 forks source link

Enums without default values #341

Open Nelhoa opened 8 months ago

Nelhoa commented 8 months ago

Thanks for repairing #333 But would it be possible to not have default values for enums ? I would like to have my select fields empty when the page load. Instead I’m forced to set values to undefined with typescript errors in the script tags.

Severity : Minor

ciscoheat commented 8 months ago

It's a matter of type-safety - if the type is YourEnum (as it is with required fields) compared to YourEnum | undefined (optional fields), then it must have a value, it cannot be undefined.

I'm considering adding an enumProxy or similar to handle this.

Nelhoa commented 8 months ago

Thanks ! I’ll wait to see how you handle this 👍

ciscoheat commented 8 months ago

To make it work with all validation libraries, you have to be able to map the inferred schema type T to a type that extends certain fields in it with for example undefined or even an empty string. But I don't think that's the whole solution, as you need to specify the default (empty) values somehow too.

The best workaround I can come up with is to modify the adapter defaults.

const schema = z.object({
  dir: z.enum(['north', 'south', 'east', 'west'])
});

const adapter = zod(schema);
adapter.defaults.dir = '' as 'north';

const form = await superValidate(adapter);
Nelhoa commented 8 months ago

Don’t you think that it may run into the same issue ?

I’m not sure to understand the role of the adapter.

If dir = '' instead of undefined, the select fields will consider themselves as selected ?

If the user click on submit he won’t have an HTML alert with a tooltip on the select field, but he’s going to have a Zod error message telling the value doesn’t fit the enum.

ciscoheat commented 8 months ago

Modifying the adapter defaults makes it possible to have a required enum field, while still having a default value that isn't part of the enum.

dir cannot be undefined in the above schema, but an empty string will coerce with the strings in the enum, so you don't have to cast with as unknown. In either case, no option will be initially selected.

shellicar commented 8 months ago

Looks like this (at least the specific issue I was encountering) may have been fixed in 2.6.1

wesharper commented 8 months ago

This also works in the server, but it would be very nice if it was handled natively by superForms:

// +page.server.ts
const form = await superValidate(zod(mySchema));
form.data.dir = undefined as unknown as Direction;

return { form }
wesharper commented 8 months ago

Our app has giant forms with dozens of required select inputs, so having to do this manually for each form is a pain.

Also, we have a handful of large forms that will autosave a draft using a partial schema and validate a full schema and publish a record on submit. I will let you know what that mess looks like once I start migrating those larger forms over.

ciscoheat commented 8 months ago

I suggest making a helper function/wrapper for superValidate, as this problem won't easily go away, due to how the JSON schema generators are detecting required fields.

ciscoheat commented 7 months ago

Best workaround currently, which keeps things in the schema and with the same type, so it won't cause a native type error:

const schema = z.object({
  dir: z.enum(['north', 'south', 'east', 'west']).default('' as 'north')
});
Nelhoa commented 7 months ago

Thanks but this is dirty x)

ciscoheat commented 7 months ago

You can't have it both ways, if you want type-safety you must add '' as a value to the enum, and invalidate it in a refine function.

ciscoheat commented 7 months ago

This is type-safe:

const schema = z.object({
  dir: z
    .enum(['', 'north', 'south', 'east', 'west'])
    .refine((dir) => dir != '', 'No direction specified')
});