How to debug and understand errors like using the wrong name on a field?

[zayenz]

In a project I have a Zod schema with a set of fields, and a ValidatedForm based on that schema. howeveer, I had made and error and had not used the same name for a required field in the schema and the form (say, field foo in the schema and a field with name barin the form).

This had the result that the form would not submit (rightly so, since the required foo was not present), but there is no indication what is wrong since none of the inputs looked for errors for foo, just for bar.

Is there a good strategy for debugging and understanding how a ValidatdForm when it is running?

[airjp73]

Yeah, that's a tricky situation. I usually just end up doing something like this:

const DebugForm = () => {
  const context = useFormContext();
  return <pre>{JSON.stringify(context, null, 2)}</pre>
}

[zayenz]

Yeah, that is similar to what I've done. I also started adding id's to all forms everywhere since that simplified getting the data in a place that is easy to display.

Thanks!