I'm encountering an problem when attempting to save an option in the database.
To address this issue, I created a component in Svelte called StatePicker that is responsible for saving US States. However, when I try to save it in the database using a TypeScript file with Superforms for SvelteKit, the state information does not get saved. Everything else is being saved properly.
Here is the code for StatePicker.svelte:
<script lang="ts">
import MaterialSelect from './MaterialSelect.svelte';
export let invalid = '';
export let value: string = '';
export let label = 'State';
export let name = 'state';
export let id = 'state';
export let placeholder = ' ';
export let disabled = false;
export let readonly = false;
export let required = false;
const STATES = [
{ state: 'Alabama', abbreviation: 'AL' },
{ state: 'Alaska', abbreviation: 'AK' },
// Other states listed here...
{ state: 'Wyoming', abbreviation: 'WY' }
];
</script>
<MaterialSelect {label} value={value} {id} {disabled}>
{#each STATES as { state, abbreviation }}
<option value={state}>{abbreviation}</option>
{/each}
</MaterialSelect>
The TypeScript code used to store data in the database works fine for everything except the StatePicker component:
import type { Actions, PageServerLoad } from './$types';
import { Schema, z } from 'zod';
import { message, superValidate } from 'sveltekit-superforms/server';
const insuranceCompanySchema = z.object({
// Definition of schema fields omitted for brevity
});
export const load = (async ({ locals, params }) => {
const form = await superValidate(insuranceCompanySchema);
console.log('bop');
return {
form
};
}) satisfies PageServerLoad;
// Other actions and validation checks are defined here