FormMessage can't be used outside of FormField

mocdaniel commented 1 year ago

Bug report

Current Behavior

According to the Form documentation I should be able to use a <Form.Message> outside of a wrapping <Form.Field> as long as I wire them up explicitly using the name prop.

However, this doesn't work and results in below error when using with NextJS 13.4.10:

- error node_modules/@radix-ui/react-context/dist/index.mjs (55:0) @ useContext
- error Error: `FormMessage` must be used within `FormField`
null

Expected behavior

I would like to be able to use <Form.Message> outside of a <Form.Field> as mentioned in the docs.

Reproducible example

'use client'

import * as Form from '@radix-ui/react-form'

export default function SignupEmailComponent() {
    return (
        <Form.Root>
            <Form.Message match="valueMissing" name={"email"}>
                Please enter your email address.
            </Form.Message>
            <Form.Message match="typeMismatch" name={"email"}>
                Please enter a valid email address.
            </Form.Message>
            <div className="flex gap-2 items-center">
                <Form.Field className="grow" name="email">
                    <Form.Control asChild>
                        <input type="email" className="w-full" placeholder="rolli@example.com" required />
                    </Form.Control>
                </Form.Field>
                <Form.Submit asChild>
                    <button className="link-button">Submit</button>
                </Form.Submit>
            </div>
        </Form.Root>
    )
}

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-form	^0.0.3
React	n/a	18.2.0
Browser	Arc (Chromium)	114.0.5735.198
Assistive tech	-	-
Node	n/a	18.16.1
npm/yarn	npm	9.5.1
Operating System	MacOS	13.4.1(c)