withForm types break if defaultValues includes any extra field

[ljukas]

Describe the bug

Using withForm breaks whenever any extra field is added to the parents defaultValues.

import './App.css'
import { useAppForm, withForm } from './hooks/form'

function App() {

  const form = useAppForm({
    defaultValues: {
      form1: '',
      form2: ''
    }
  })

  return (
    <div>
      <ChildForm1 form={form} />
    </div>
  )
}

export default App


const ChildForm1 = withForm({
  defaultValues: {
    form1: ''
  },
  render: ({form}) => {
    return (
      <div />
    )
  }
})

Your minimal, reproducible example

https://github.com/ljukas/tanstack-withform-multiple

Steps to reproduce

Create a child form using withForm from the createHookForm api. Use useAppForm, add the required defaultValues for the child form, then add any extra field to the parents defaultValues. The child-form form props types will no give a red squiggly line.

This also means you cannot compose multiple child forms together, or you can but you get type errors on the childform form-prop

Expected behavior

As I user I expect the child-form to only care about the fields that it itself needs. So that I can compose multiple child forms together, which I expect is the use case from the start.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

All

TanStack Form adapter

react-form

TanStack Form version

1.1.0

TypeScript version

5.7.2

Additional context

No response

[MusKRI]

As far as I know, you must pass the same default values to withForm HOC as you pass in main useForm hook. if you are passing form options, then you can share this with different withForm HOC to remain consistent to avoid issues.

[juanvilladev]

This relates to #1273 where the types can be misleading for subforms/parent forms/formOptions.

@MusKRI is correct. The types must be exactly the same, to do this you spread the values you defined from formOptions. withForm is not intended to define custom defaultValues/validators at the subForm level.

See also #1292 is also facing a similar issue.

IMO we should close this issue and add the details to #1273 since that's the main cause of this.

[ljukas]

@MusKRI Which is what Im trying to report as an error. If the child form needs to have exactly the same default values as the main form it is no longer a child form, it is the form. Say you want to reuse the same child form in two different forms that have seperate values except for the values that the child form needs. You cannot do that reliably atm.

#1273 seems to be a different issue. Using two different child forms inside a parent form and spreading their formOptions will override each others values, so doing that is not reliable.

const childForm1Opts = formOptions({
 defaultValues: {
   form1: ''
}})

const childForm1Opts = formOptions({
 defaultValues: {
   form3: ''
}})

useAppForm({
...childForm1Opts,
...childForm2Opts,
})

Doing this will not merge the options, and you would then for every sub-part of the formOptions spread them instead, which would lead to things like this

useAppForm({
 ...childForm1Opts,
...childForm2Opts,
defaultValues: {
  ...childForm1Opts.defaultValues,
  ...childForm2Opts.defaultValues,
}})

etc, so if this is the target api there would need to some form of merge function so this can done better

[Velua]

Say you want to reuse the same child form in two different forms that have seperate values except for the values that the child form needs. You cannot do that reliably atm.

Yeah I thought that was the whole point, bit confusing!

[mackehansson]

Which is what Im trying to report as an error. If the child form needs to have exactly the same default values as the main form it is no longer a child form, it is the form. Say you want to reuse the same child form in two different forms that have seperate values except for the values that the child form needs. You cannot do that reliably atm.

This.