Fixes #208, posting of native enums.

Author: ciscoheat

CHANGELOG.md

@@ -5,6 +5,12 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Fixed
+
+- Native string enums weren't working when posting the actual string value.
+
 ## [1.1.2] - 2023-06-24
 
 ### Added

src/lib/superValidate.ts

@@ -146,6 +146,12 @@ function formDataToValidation<T extends AnyZodObject>(
       return newValue;
     }
 
+    /*
+    console.log(
+       `FormData field "${field}" (${zodType._def.typeName}): ${value}`
+    );
+    */
+
     if (zodType._def.typeName == 'ZodString') {
       return value;
     } else if (zodType._def.typeName == 'ZodNumber') {
@@ -184,10 +190,16 @@ function formDataToValidation<T extends AnyZodObject>(
       return value;
     } else if (zodType._def.typeName == 'ZodNativeEnum') {
       const zodEnum = zodType as ZodNativeEnum<EnumLike>;
+
       if (value !== null && value in zodEnum.enum) {
         const enumValue = zodEnum.enum[value];
         if (typeof enumValue === 'number') return enumValue;
         else if (enumValue in zodEnum.enum) return zodEnum.enum[enumValue];
+      } else if (
+        value !== null &&
+        Object.values(zodEnum.enum).includes(value)
+      ) {
+        return value;
       }
       return undefined;
     } else if (zodType._def.typeName == 'ZodSymbol') {

src/routes/tests/issue-208/+page.server.ts

@@ -0,0 +1,36 @@
+import type { Actions, PageServerLoad } from './$types';
+import { message, superValidate } from '$lib/server';
+import { fail } from '@sveltejs/kit';
+import { z } from 'zod';
+import { UserType, NumberType } from './UserType';
+
+const schema = z.object({
+  type: z.nativeEnum(UserType),
+  number: z.nativeEnum(NumberType)
+});
+
+///// Load //////////////////////////////////////////////////////////
+
+export const load: PageServerLoad = async () => {
+  const form = await superValidate(schema);
+  return { form };
+};
+
+///// Form actions //////////////////////////////////////////////////
+
+export const actions: Actions = {
+  default: async ({ request }) => {
+    const formData = await request.formData();
+    console.log(
+      '🚀 ~ file: +page.server.ts:25 ~ default: ~ formData:',
+      formData
+    );
+    const form = await superValidate(formData, schema);
+
+    console.log('POST', form);
+
+    if (!form.valid) return fail(400, { form });
+
+    return message(form, form.data.type + ' posted ' + form.data.number);
+  }
+};

src/routes/tests/issue-208/+page.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { superForm } from '$lib/client';
+  import type { PageData } from './$types';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { page } from '$app/stores';
+  import { UserType, NumberType } from './UserType';
+
+  export let data: PageData;
+
+  const { form, errors, message, enhance } = superForm(data.form);
+</script>
+
+<h3>Native string enums</h3>
+
+{#if $message}
+  <div
+    class="status"
+    class:error={$page.status >= 400}
+    class:success={$page.status == 200}
+  >
+    {$message}
+  </div>
+{/if}
+
+<form method="POST" use:enhance>
+  <label>
+    Type<br />
+    <select bind:value={$form.type} name="type">
+      <option value={UserType.WORKER}>{UserType.WORKER}</option>
+      <option value={UserType.MANAGER}>{UserType.MANAGER}</option>
+    </select>
+  </label>
+
+  <label>
+    Number<br />
+    <select bind:value={$form.number} name="number">
+      <option value={NumberType.WORKER}>{NumberType.WORKER}</option>
+      <option value={NumberType.MANAGER}>{NumberType.MANAGER}</option>
+    </select>
+  </label>
+
+  <button>Submit</button>
+</form>
+
+<style>
+  .status {
+    color: white;
+    padding: 4px;
+    padding-left: 8px;
+    border-radius: 2px;
+    font-weight: 500;
+  }
+
+  .status.success {
+    background-color: seagreen;
+  }
+
+  .status.error {
+    background-color: #ff2a02;
+  }
+
+  form {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+</style>

src/routes/tests/issue-208/UserType.ts

@@ -0,0 +1,9 @@
+export enum UserType {
+  WORKER = 'worker',
+  MANAGER = 'manager'
+}
+
+export enum NumberType {
+  WORKER = 1,
+  MANAGER = 10
+}

src/routes/tests/issue-208/schema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  name: z.string().min(1)
+});