Superforms : updating array of objects

Question

I'm trying to work with schema that looks like this (using zod):

const examSchema = z.object({
    name: z.string().min(4).max(250),
    message: z.string().max(500).optional(),
    maxPoints: z.string(),
    questions: examQuestionSchema.array().min(1),
    shuffleQuestions: z.boolean(),
});

On my svelte frontend i then try to update the questions with a button "add question" that on click does this:

<script lang="ts">
  const { form, errors, constraints, enhance } = superForm<ExamSchema, any, any>(data.form);
</script>

<form enctype="multipart/form-data" method="POST" use:enhance>
    <button
        type="button"
        onclick={() => {
            const newQuestion: ExamSchema['questions'][0] = {
                id: shortUUID.uuid(),
                type: 'abc',
                points: '0',
                question: '',
                answers: [],
            };
            $form.questions = [...$form.questions, newQuestion]
        }}
        class="toolbar-btn"
    >
        <Abc height="16px" width="16px"></Abc>
    </button>
        <button type="submit" class="button-primary save-exam">
            {$i18n.t('teacher_panel.exam_editor.submit')}
        </button>
</form>

Server code:

export const load = async () => {
    const form = await superValidate(zod(examSchema));
    return { form };
};

export const actions = {
    default: async (request) => {
        const form = await superValidate(request, zod(examSchema));
        console.log(form)
        return { form };
    }
} satisfies Actions;

However upon submitting on backend i can log that the data im sending is missing the question despite he UI getting updated properly

Where is the submission code? The given code only updates local state. — brunnerh
– brunnerh, Commented Oct 4, 2024 at 8:36
Yes, the issue got resolved once i changed the dataType on client to 'json' — Marcin
– Marcin, Commented Oct 4, 2024 at 10:37
Please either post an answer (with more details) if you think this could be useful to other people or delete the question if not. — brunnerh
– brunnerh, Commented Oct 4, 2024 at 10:49

brunnerh · Accepted Answer · 2024-10-04 11:50:50Z

1

changing dataType in the client solved the issue:

const { form, errors, constraints, enhance } =
    superForm<ExamSchema, any, any>(data.form, {
        dataType: 'json'
    });

edited Oct 4, 2024 at 11:50

brunnerh

188k30 gold badges362 silver badges434 bronze badges

answered Oct 4, 2024 at 11:28

Marcin

6008 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Superforms : updating array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related