harsh-harlequin

"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 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

6 Replies

correct-apricot•4w ago

form validators are definitely the way to go here when mapping to fields from a form validator, you can optionally create a form property that can have any validator data you want. Those will be accessed globally so the fields will contain the error mapped to them, but the form property can group those errors for you too we're also looking into adding a field mode that collects subfield errors

harsh-harlequinOP•4w ago

Ahh nice! I’m already using Zod, so would this be something I would add to the schema?

correct-apricot•4w ago

zod should already pass a copy of the field errors to the form though it's a bit tricky to get all the errors out. With zod, it's probably easier to just tell it what the path should be instead

harsh-harlequinOP•4w ago

Ahh right I see, I’ll do it that way then! Thanks for the help

correct-apricot•4w ago

let me know if you have trouble with the zod schema's path

harsh-harlequinOP•4w ago

That worked very nicely, thanks again!

Gaming

Programming

"Collect" all errors from nested fields

Did you find this page helpful?