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