TanStack Form supports arrays as values in a form, including sub-object values inside of an array.
To use an array, you can use field.state.value on an array value in conjunction with each blocks:
<script>
import { createForm } from '@tanstack/svelte-form'
const form = createForm(() => ({
defaultValues: {
people: [],
},
}))
</script>
<form.Field name="people" mode="array">
{#snippet children(field)}
{#each field.state.value as person, i}
<!-- ... -->
{/each}
{/snippet}
</form.Field>
<script>
import { createForm } from '@tanstack/svelte-form'
const form = createForm(() => ({
defaultValues: {
people: [],
},
}))
</script>
<form.Field name="people" mode="array">
{#snippet children(field)}
{#each field.state.value as person, i}
<!-- ... -->
{/each}
{/snippet}
</form.Field>
This will regenerate the list every time you run pushValue on field:
<button onclick={() => field.pushValue({ name: '', age: 0 })} type="button">
Add person
</button>
<button onclick={() => field.pushValue({ name: '', age: 0 })} type="button">
Add person
</button>
Finally, you can use a subfield like so:
<form.Field name={`people[${i}].name`}>
{#snippet children(subField)}
<input
value={subField.state.value}
oninput={(e) => {
subField.handleChange(e.currentTarget.value)
}}
/>
{/snippet}
</form.Field>
<form.Field name={`people[${i}].name`}>
{#snippet children(subField)}
<input
value={subField.state.value}
oninput={(e) => {
subField.handleChange(e.currentTarget.value)
}}
/>
{/snippet}
</form.Field>
<script lang="ts">
import { createForm } from '@tanstack/svelte-form'
const form = createForm(() => ({
defaultValues: {
people: [] as Array<{ age: number; name: string }>,
},
onSubmit: ({ value }) => alert(JSON.stringify(value)),
}))
</script>
<form
id="form"
onsubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
}}
>
<form.Field name="people">
{#snippet children(field)}
<div>
{#each field.state.value as person, i}
<form.Field name={`people[${i}].name`}>
{#snippet children(subField)}
<div>
<label>
<div>Name for person {i}</div>
<input
value={person.name}
oninput={(e: Event) => {
const target = e.target as HTMLInputElement
subField.handleChange(target.value)
}}
/>
</label>
</div>
{/snippet}
</form.Field>
{/each}
<button
onclick={() => field.pushValue({ name: '', age: 0 })}
type="button"
>
Add person
</button>
</div>
{/snippet}
</form.Field>
<button type="submit"> Submit </button>
</form>
<script lang="ts">
import { createForm } from '@tanstack/svelte-form'
const form = createForm(() => ({
defaultValues: {
people: [] as Array<{ age: number; name: string }>,
},
onSubmit: ({ value }) => alert(JSON.stringify(value)),
}))
</script>
<form
id="form"
onsubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
}}
>
<form.Field name="people">
{#snippet children(field)}
<div>
{#each field.state.value as person, i}
<form.Field name={`people[${i}].name`}>
{#snippet children(subField)}
<div>
<label>
<div>Name for person {i}</div>
<input
value={person.name}
oninput={(e: Event) => {
const target = e.target as HTMLInputElement
subField.handleChange(target.value)
}}
/>
</label>
</div>
{/snippet}
</form.Field>
{/each}
<button
onclick={() => field.pushValue({ name: '', age: 0 })}
type="button"
>
Add person
</button>
</div>
{/snippet}
</form.Field>
<button type="submit"> Submit </button>
</form>
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.