| 42 | } |
| 43 | |
| 44 | const useFormField = () => { |
| 45 | const fieldContext = React.useContext(FormFieldContext) |
| 46 | const itemContext = React.useContext(FormItemContext) |
| 47 | const { getFieldState, formState } = useFormContext() |
| 48 | |
| 49 | const fieldState = getFieldState(fieldContext.name, formState) |
| 50 | |
| 51 | if (!fieldContext) { |
| 52 | throw new Error("useFormField should be used within <FormField>") |
| 53 | } |
| 54 | |
| 55 | const { id } = itemContext |
| 56 | |
| 57 | return { |
| 58 | id, |
| 59 | name: fieldContext.name, |
| 60 | formItemId: `${id}-form-item`, |
| 61 | formDescriptionId: `${id}-form-item-description`, |
| 62 | formMessageId: `${id}-form-item-message`, |
| 63 | ...fieldState, |
| 64 | } |
| 65 | } |
| 66 | |
| 67 | type FormItemContextValue = { |
| 68 | id: string |