Theo's Typesafe Cult•4mo ago

Weird field error with React Hook Form (using Shadcn Form)

Im working on an app using the T3 stack. Im using Shadcn for the form and using the React Hook Form useFieldArray hook to dynamically add and remove fields. The issue i am running into has to do with field validation. I defined a Zod schema for the form, but when i submit i get this error:

"errors": {
  "": {
    "message": "Required",
    "type": "invalid_type"
  }
}

"errors": {
  "": {
    "message": "Required",
    "type": "invalid_type"
  }
}

It seems to be referencing a field with a blank name, however if i take a look at the values object it seems that every field has a name.

"values" : {
  "report": [
    {
      "number": "1244",
      "Pt name": "John Does",
      "readonly": "Placeholder",
      "select": "option1",
      "date": "2024-07-03T05:00:00.000Z"
    }
  ]
}

"values" : {
  "report": [
    {
      "number": "1244",
      "Pt name": "John Does",
      "readonly": "Placeholder",
      "select": "option1",
      "date": "2024-07-03T05:00:00.000Z"
    }
  ]
}

Im not really sure what is causing this and i could not find anything like this online. Can someone please point me in the right direction? Im relatively new to both Zod and React Hook Form.

1 Reply

David HusonOP•4mo ago

I figured it out. If anyone else runs into a similar problem. The issue was with my schema shape. Since the form uses the useFieldArray hook, the dynamic fields are named using the following convention: record.${index}.${name} but the schema just had a single z.object with the names of the fields as the keys. The fix was to create an outer z.object named record and inside it have an array of z.objects with the field schemas in it.

Gaming

Programming

Weird field error with React Hook Form (using Shadcn Form)