"Nested" Forms

[michaelcamper]

I have a TaskForm with a pretty complex UI. I either want to use this form standalone (to create a new task or add an existing task) or inside TaskList component that allows to add and edit a list of tasks.

Therefore, I want to useForm in TaskList and somehow pass a form to all the TaskForms inside the list.

Here is my best attempt to achieve this:

import {
  createFormHook,
  createFormHookContexts,
  formOptions,
  useForm,
} from "@tanstack/react-form";
import { z } from "zod";

// ------- Task Form -------

const taskInputSchema = z.object({
  title: z.string(),
});

type TaskInput = z.infer<typeof taskInputSchema>;

const {
  fieldContext: taskFormFieldContext,
  formContext: taskFormContext,
  useFieldContext: useTaskFormFieldContext,
  useFormContext: useTaskFormContext,
} = createFormHookContexts();

const { useAppForm: useTaskForm, withForm: withTaskForm } = createFormHook({
  fieldComponents: {},
  formComponents: {},
  fieldContext: taskFormFieldContext,
  formContext: taskFormContext,
});

export const taskFormOpts = formOptions({
  defaultValues: {
    title: "",
  } as TaskInput,
  validators: {
    onChange: taskInputSchema,
  },
});

const TaskForm = withTaskForm({
  ...taskFormOpts,
  render: ({ form }) => {
    return (
      <form.Field
        name="title"
        children={(field) => {
          return (
            <input
              value={field.state.value}
              onChange={(e) => field.handleChange(e.target.value)}
            />
          );
        }}
      />
    );
  },
});

// ------- Usages -------

const StandaloneTaskForm = () => {
  const form = useTaskForm({
    ...taskFormOpts,
  });

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        form.handleSubmit();
      }}
    >
      <TaskForm form={form} />
      <button type="submit">Submit</button>
    </form>
  );
};

const TaskList = () => {
  const form = useForm({
    defaultValues: {
      tasks: new Array<TaskInput>(),
    },
    validators: {
      onChange: z.object({
        tasks: z.array(taskInputSchema),
      }),
    },
  });
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        form.handleSubmit();
      }}
    >
      <form.Field
        name="tasks"
        mode="array"
        children={(tasksField) => {
          const handleAddTask = () => {
            const title = prompt("Enter task title");
            if (!title) return;
            tasksField.pushValue({ title });
          };

          return (
            <>
              {tasksField.state.value.map((_, index) => (
                <form.Field
                  key={index}
                  name={`tasks[${index}]`}
                  children={(taskField) => {
                    // Ideally, I would like to convert the taskField (FieldApi) into a FormApi for the TaskForm here
                    // const taskForm = ...
                    // return <TaskForm key={index} form={taskForm} />;

                    // This is the closest I can get to the desired behavior
                    return (
                      <TaskListItem
                        value={taskField.state.value}
                        onChange={taskField.handleChange}
                      />
                    );
                  }}
                />
              ))}
              <button type="button" onClick={handleAddTask}>
                Add Task
              </button>
            </>
          );
        }}
      />
      <button type="submit">Submit Tasks</button>
    </form>
  );
};

const TaskListItem = ({
  value,
  onChange,
}: {
  value: TaskInput;
  onChange: (value: TaskInput) => void;
}) => {
  const form = useTaskForm({
    ...taskFormOpts,
    defaultValues: value,
    listeners: {
      onChange: ({ formApi }) =>  formApi.handleSubmit()},
  });

  return (
     <TaskForm form={form} />
  );
};

Here's another approach that worked, but is a TS mess:

• [TaskList] Wrap the tasksField inside <taskFormContext.Provider value={form}>...</taskFormContext.Provider>
• [TaskForm] Add an optional prefix prop and prepend the field names
• [TaskForm] Replace useTaskForm with useTaskFormContext