Dynamic Form Fields with TanStack Form
Showcase how to dynamically add and remove form fields in a Solid.js application using TanStack Form, including the use of arrays and objects for form state management.
import { createSignal } from 'solid-js';
import { useForm, useFieldArray } from '@tanstack/solid-form';
Imports necessary functions from Solid.js and TanStack Form to manage form states and dynamic field arrays.
const MyDynamicForm = () => {
const { register, control, handleSubmit } = useForm({
defaultValues: {
emails: [{ value: '' }]
}
});
const { fields, append, remove } = useFieldArray({
control,
name: 'emails'
});
Sets up a form with a dynamic array of email fields. 'useForm' initializes the form state with one email field by default. 'useFieldArray' manages the `emails` array.
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
{fields.map((field, index) => (
<div key={field.id}>
<input
{...register(`emails.${index}.value`)}
placeholder='Email'
/>
<button type='button' onClick={() => remove(index)}>Remove</button>
</div>
))}
<button type='button' onClick={() => append({ value: '' })}>Add Email</button>
<button type='submit'>Submit</button>
</form>
);
};
Renders the form allowing users to dynamically add or remove email input fields, and submit all input fields' data. 'append' adds a new field, while 'remove' deletes a field.