TanStackT
TanStack•3w ago•
6 replies
popular-magenta

deepkeys and partial reuse

I'm looking into spreading error messages using of a big tformdata into targeted places. for this, i planned to use a form with nested objects:

const form = useForm({
  defaultValues: {
    foo: { bar: 0, baz: '', }
  }
})

<form.Field name="foo" validators={{ onChange: zodValidatorHere }}>
  {(field => (
    <FooBarComponent
      value={field.state.value}
      onChange={field.handleChange}
    />
  )}
</form>


and in my FooBarComponent, something like:

const barField = useField({ form, name: 'foo.bar' })
const bazField = useField({ form, name: 'foo.baz' })

return (
  <>
    <input type="number" />
    {barField.state.meta.errors}
    <input type="string" />
    {bazField.state.meta.errors}
  </>
)


but when i do, it creates a weird form state where 
foo
, foo.bar and foo.baz are 3 distinct fields and the 3 fields do not share a common state... since the validator is at the 
foo
 level, the foo.bar and foo.baz do not get errors spread even tho we can see the 
foo
 state to have meta.errors.path to contain ["bar"]

while i do understand why it's like this, i definitely do not feel it's a good UX ; is there any way for me not to have to pull the error by path, obviously without having to pass again the validator?
Was this page helpful?