How to bind to field values dynamically with Svelte 5 changes

[sumit-fincog]

I'm trying to implement a Custom Email Input (validated), as part of migrating an app to Svelte 5, like the following

<script lang="ts" module>
	import type { FormPath } from 'sveltekit-superforms';
	type T = Record<string, unknown>;
	type U = unknown;
</script>

<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
	import { cn } from '$lib/util';
	import type { ClassValue } from 'clsx';
	import type { FieldProps } from 'formsnap';
	import { Control, Description, Field, FieldErrors, Label } from 'formsnap';
	import type { FormFieldProxy } from 'sveltekit-superforms';
	import { formFieldProxy } from 'sveltekit-superforms';
	import IconReset from '~icons/ri/close-line';
	import IconError from '~icons/ri/error-warning-fill';

	let {
		form,
		name,
		children: childrenProp,
		label = 'Email Address',
		description = null,
		placeholder = '',
		onReset = null
	}: FieldProps<T, U> & {
		label: string;
		description?: string | null;
		placeholder?: string;
		onReset?: null | (() => void);
	} = $props();
</script>

<Field {form} {name}>
	{#snippet children({ errors, constraints })}
		<Control>
			{#snippet children({ props })}
				<div class={cn('elstack-sm text-sm', classes)}>
					<Label>{label}</Label>
					<div class="relative">
						<input
							bind:value
							type="email"
							{...props}
							{...constraints}
							{placeholder}
						/>
						<div class:hidden={!errors}>
							<IconError class="text-error" />
						</div>
						{#if onReset}
							<div>
								<button
									aria-label="clear"
									onclick={onReset}
								>
									<IconReset class="size-4" />
								</button>
							</div>
						{/if}
					</div>
					<div class="mt-1 text-sm">
						{#if description && !errors}
							<Description>{description}</Description>
						{/if}
						{#if errors}
							<FieldErrors class="text-error" />
						{/if}
					</div>
				</div>
			{/snippet}
		</Control>
	{/snippet}
</Field>

I'm not able to figure out how to get the binding of the input control's value to the form working. A simple bind:value doesn't work with the Field snippet value prop (I think by design since snippet params are readonly).

I had this working ealier through

const { value, errors } = formFieldProxy(form, name) satisfies FormFieldProxy<string>;

...

					<input
						{...props}
						type="email"
						bind:value={$value}
						{placeholder}
					/>
					

This uses the formFieldProxy from SuperForms to bind with the corresponding form field, but that doesn't work through the wrapped FsSuperForm type

Argument of type 'FsSuperForm<T, any>' is not assignable to parameter of type 'SuperForm<T>'.
  Property 'options' is optional in type 'FsSuperForm<T, any>' but required in type 'SuperForm<T>'

I suspect there is a better way to achieve this. Any and all advice is welcome.

[sumit-fincog]

The following seems to work

let { value } = formFieldProxy(form as SuperForm<T>, name) satisfies FormFieldProxy<string>;

...

<input bind:value={$value} />