Form Submit with fields.set only runs if hidden fields are added.

[matteopiatti]

Describe the bug

When setting fields according to data (i.e. for an edit form), the form will not submit without hidden fields. Not sure if this is intentional. But I imagine it would be nice, to set fields including hidden files via fields.set as to not need to add hidden fields anymore. The form does not submit without all fields as inputs though.

<script lang="ts">
	import { updatePage, getPages } from '$lib/db/remotes/page.remote';
	const pages = $derived(await getPages());

	updatePage.fields.set({
		pageId: '6964aeb9dbcf6670463f4e4d',
		title: 'test',
		slug: 'slugtest',
		parentId: undefined
	});
</script>

<form {...updatePage}>
	<label>
		Title
		<input {...updatePage.fields.title.as('text')} />
	</label>
	<label>
		Slug
		<input {...updatePage.fields.slug.as('text')} />
	</label>

	<label>
		Parent Page id
		<select {...updatePage.fields.parentId.as('select')}>
			{#each pages as page}
				<option value={page.id} selected={page.id == updatePage.fields.parentId.value()}>
					{page.title}
				</option>
			{/each}
		</select>
	</label>

	<button type="submit">Save</button>
</form>

Reproduction

Setup remote form with valibot. Create form in +page.svelte without one of the necessary fields as seen in the code above.

Logs

System Info

not relevant

Severity

annoyance

Additional Information

No response

[matteopiatti]

Actually after trying to add the hidden fields this leads to a Error: hidden inputs must have a value error, because the fields.set runs later than the hidden field check i presume. So what is actually the correct way to set "hidden" values for a form like id's to create such update forms?

[matteopiatti]

Correction, the issue stems from the fact, that the "as" function for type hidden needs a value passed. Why I don't know, but doing something like this for hidden values works:

<input {...updatePage.fields.pageId.as('hidden', updatePage.fields.pageId.value())} />

[filiabel]

I think it makes sense that all hidden inputs must be defined, since it must be a valid HTML form.

I agree that the hidden syntax is a bit clunky when you want the underlying value to be dynamic. It seems to me like the hidden inputs are tailored for static values as of now? Like in a table with e.g. a delete command for a specific row ID.

I have used this pattern from time to time:

<input {...updatePage.fields.pageId.as('text') hidden} />