Custom Form

A custom form's presence is static but its input structure is dynamic. A todo-list where users can add/remove inputs is a common example.

src/component/TodoForm.tsx

const TODO_LIST_FORM = new CreateForm({
  validateOn: ["submit", "change"],
  clearFormOn: ["submit", "routeChange"],
});

export default function TodoForm() {
  const [todo, setTodo] = useState<Array<{ name: string, todo: "date" | "text" }>>([{ name: "date", todo: "date" }]);

  return (
    <form onSubmit={TODO_LIST_FORM.handleSubmit((data) => {console.log(data)})}>
      {todo.map(({ name, todo }, i) => (
        <div key={i}>
          {name}
          <input {...TODO_LIST_FORM.useRegister(name, { type: todo, validate: { required: true } })}/>
          {TODO_LIST_FORM.useFields(name).error}
        </div>
      ))}

      <button type="button" onClick={() => setTodo(prev => [...prev, { name: `할일 ${prev.length}`, todo: "text" }])}>Add todo</button>
      <button>submit</button>
    </form>
  )
}

Be careful: naive custom form implementations that call useRegister/useFields conditionally can trigger the React "Rendered more hooks than during the previous render." error. Use SicilianProvider and useSicilianContext to move hook usage into children and avoid this.

src/component/TodoForm.tsx

const TODO_LIST_FORM = new CreateForm({
  validateOn: ["submit", "change"],
  clearFormOn: ["submit", "routeChange"],
});

export default function TodoForm() {
  const [todo, setTodo] = useState<Array<{ name: string, type: "date" | "text" }>>([{ name: "date", type: "date" }, { name: "할일 1", type: "text" }]);

  return (
    <form onSubmit={TODO_LIST_FORM.handleSubmit((data) => {console.log(data)})}>
      {todo.map(({ name, type }, i) => (
        <div key={i}>
          <SicilianProvider
            value={{
              useRegister: TODO_LIST_FORM.useRegister,
              name,
              type,
              validate: { required: true },
              useFields: TODO_LIST_FORM.useFields,
            }}
          >
            <TodoInput />
          </SicilianProvider>
        </div>
      ))}

      <button type="button" onClick={() => setTodo(prev => [...prev, { name: `할일 ${prev.length}`, type: "text" }])}>Add TODO</button>
      <button>submit</button>
    </form>
  )
}

const TodoInput = () => {
  const { useRegister, name, validate, type, useFields } = useSicilianContext();
  const field = useFields?.(name);

  return (
    <>
      {name}
      <input {...useRegister(name, { validate, type })}/>
      {field?.error}
    </>
  )
}