"Collect" all errors from nested fields

Is there an idomatic way to get the following to work:

<form.AppField name="parent">
  {(field) => (<div>
    <p>{field.state.meta.errors.join(",")}
    <form.AppField name="parent.child">
      ...
    </form.AppField>
  </div>)}
</form.AppField>

<form.AppField name="parent">
  {(field) => (<div>
    <p>{field.state.meta.errors.join(",")}
    <form.AppField name="parent.child">
      ...
    </form.AppField>
  </div>)}
</form.AppField>

where the sub field of

parent.child

parent.child

is the one with the error, but can be "dected" or "collected' by the parent.

Context here is that I have a complex form who's sub-fields are often hidden in modals and therefore it would be useful to get the error state of all children in the parent field so that I can indicate to user they should investigate the sub-fields that are hidden

TanStack•8mo ago•

9 replies

full-green

"Collect" all errors from nested fields

Is there an idomatic way to get the following to work:

<form.AppField name="parent">
  {(field) => (<div>
    <p>{field.state.meta.errors.join(",")}
    <form.AppField name="parent.child">
      ...
    </form.AppField>
  </div>)}
</form.AppField>

<form.AppField name="parent">
  {(field) => (<div>
    <p>{field.state.meta.errors.join(",")}
    <form.AppField name="parent.child">
      ...
    </form.AppField>
  </div>)}
</form.AppField>

where the sub field of

parent.child

parent.child

"Collect" all errors from nested fields

"Collect" all errors from nested fields

Similar Threads