| 31 | }; |
| 32 | |
| 33 | const useFormField = () => { |
| 34 | const fieldContext = React.useContext(FormFieldContext); |
| 35 | const itemContext = React.useContext(FormItemContext); |
| 36 | const { getFieldState, formState } = useFormContext(); |
| 37 | |
| 38 | const fieldState = getFieldState(fieldContext.name, formState); |
| 39 | |
| 40 | if (!fieldContext) { |
| 41 | throw new Error("useFormField should be used within <FormField>"); |
| 42 | } |
| 43 | |
| 44 | const { id } = itemContext; |
| 45 | |
| 46 | return { |
| 47 | id, |
| 48 | name: fieldContext.name, |
| 49 | formItemId: `${id}-form-item`, |
| 50 | formDescriptionId: `${id}-form-item-description`, |
| 51 | formMessageId: `${id}-form-item-message`, |
| 52 | ...fieldState, |
| 53 | }; |
| 54 | }; |
| 55 | |
| 56 | type FormItemContextValue = { |
| 57 | id: string; |