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 Index from solid-js:
function App() {
const form = createForm(() => ({
defaultValues: {
people: []
},
}))
return (
<form.Field name="people" mode="array">
{(field) => (
<Show when={field().state.value.length > 0}>
{/* Do not change this to `For` or things will not work as-expected */}
<Index each={field().state.value}>
{(_, i) => (
null // ...
)}
</Index>
</Show>
)}
</form.Field>
)
}
function App() {
const form = createForm(() => ({
defaultValues: {
people: []
},
}))
return (
<form.Field name="people" mode="array">
{(field) => (
<Show when={field().state.value.length > 0}>
{/* Do not change this to `For` or things will not work as-expected */}
<Index each={field().state.value}>
{(_, i) => (
null // ...
)}
</Index>
</Show>
)}
</form.Field>
)
}
You must use Index from solid-js and not For because For will cause the inner components to be re-rendered every time the array changes.
This causes the field to lose its value and therefore delete the subfield's value.
This will generate the mapped JSX 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`}>
{(subField) => (
<input
value={subField().state.value}
onInput={(e) => {
subField().handleChange(e.currentTarget.value)
}}
/>
)}
</form.Field>
<form.Field name={`people[${i}].name`}>
{(subField) => (
<input
value={subField().state.value}
onInput={(e) => {
subField().handleChange(e.currentTarget.value)
}}
/>
)}
</form.Field>
function App() {
const form = createForm(() => ({
defaultValues: {
people: [],
},
onSubmit: ({ value }) => alert(JSON.stringify(value)),
}))
return (
<div>
<form
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
}}
>
<form.Field name="people">
{(field) => (
<div>
<Show when={field().state.value.length > 0}>
{/* Do not change this to For or the test will fail */}
<Index each={field().state.value}>
{(_, i) => (
<form.Field name={`people[${i}].name`}>
{(subField) => (
<div>
<label>
<div>Name for person {i}</div>
<input
value={subField().state.value}
onInput={(e) => {
subField().handleChange(e.currentTarget.value)
}}
/>
</label>
</div>
)}
</form.Field>
)}
</Index>
</Show>
<button
onClick={() => field().pushValue({ name: '', age: 0 })}
type="button"
>
Add person
</button>
</div>
)}
</form.Field>
<button type="submit">Submit</button>
</form>
</div>
)
}
function App() {
const form = createForm(() => ({
defaultValues: {
people: [],
},
onSubmit: ({ value }) => alert(JSON.stringify(value)),
}))
return (
<div>
<form
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
}}
>
<form.Field name="people">
{(field) => (
<div>
<Show when={field().state.value.length > 0}>
{/* Do not change this to For or the test will fail */}
<Index each={field().state.value}>
{(_, i) => (
<form.Field name={`people[${i}].name`}>
{(subField) => (
<div>
<label>
<div>Name for person {i}</div>
<input
value={subField().state.value}
onInput={(e) => {
subField().handleChange(e.currentTarget.value)
}}
/>
</label>
</div>
)}
</form.Field>
)}
</Index>
</Show>
<button
onClick={() => field().pushValue({ name: '', age: 0 })}
type="button"
>
Add person
</button>
</div>
)}
</form.Field>
<button type="submit">Submit</button>
</form>
</div>
)
}
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.