[bug]: Showing "undefined" in <FormMessage />

[growupanand]

Describe the bug

I have a field named fieldConfiguration.inputConfiguration.options, It's validation schema check that there should be atleast two objects in the array. If there is no field added then it showing correct field error "Array must contain at least 2 element(s)" , but when I add one field, it shows "undefined".

Screenshots

No Field added	One Field added

Solution I have checked the logs by putting console.log inside the component FormMessage, I think when I am getting "undefined" error message then in the Error Object there is no message key. I have attached the logs below.

I would like to Make Pull request for this FIX.

Replace code:

const body = error ? String(error?.message) : children;

With this one:

  const body = error ? String(error?.message || error?.root?.message) : children;

Affected component/components

Form -> <FormMessage />

How to reproduce

Try to use below code

Validation Schema:

const choiceOptionSchema = z.object({
  value: z.string().min(1),
});

export const multipleChoiceInputConfigSchema = z.object({
  options: choiceOptionSchema.array().min(2),
  allowMultiple: z.boolean().optional(),
});

Next.js Code:

  const { fields, append } = useFieldArray({
    control: formHook.control,
    name: "fieldConfiguration.inputConfiguration.options",
  });
...// Some code
      <FormField
        control={formHook.control}
        name="fieldConfiguration.inputConfiguration.options"
        render={({ field }) => (
          <FormItem>
            {fields.map((field, index) => (
              <FormField
                key={field.id}
                control={formHook.control}
                name={`fieldConfiguration.inputConfiguration.options.${index}.value`}
                render={({ field }) => (
                  <FormItem>
                    <FormControl>
                      <Input placeholder="Choice Value" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            ))}
            <FormMessage />
          </FormItem>
        )}
      />

Codesandbox/StackBlitz link

No response

Logs

Below are logs from inside the component `FormMessage`,


const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField();
  console.log({ error });

No Feild error: { "error": { "message": "Array must contain at least 2 element(s)", "type": "too_small", "ref": { "name": "fieldConfiguration.inputConfiguration.options" } } }

One Field Error: { "error": { "root": { "message": "Array must contain at least 2 element(s)", "type": "too_small", "ref": { "name": "fieldConfiguration.inputConfiguration.options" } } } }

### System Info

```bash
OS: Ubuntu 22.04.4 LTS x86_64
Browser: Google chrome Version 126.0.6478.114 (Official Build) (64-bit)

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[growupanand]

@shadcn , Can you please check the PR #4132 ?

[mneveroff]

Hey @growupanand, just looking at this and it seems like you've two FormItem nested into each other? I'd assume that it's the reason you're getting these issues, so there's not much to change in shadcn/ui itself?