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