diff --git a/packages/components/checkbox/src/checkbox-group.vue b/packages/components/checkbox/src/checkbox-group.vue
index b19ca337da..615cd9dac8 100644
--- a/packages/components/checkbox/src/checkbox-group.vue
+++ b/packages/components/checkbox/src/checkbox-group.vue
@@ -5,7 +5,7 @@
:class="ns.b('group')"
role="group"
:aria-label="!isLabeledByFormItem ? label || 'checkbox-group' : undefined"
- :aria-labelledby="isLabeledByFormItem ? elFormItem.labelId : undefined"
+ :aria-labelledby="isLabeledByFormItem ? elFormItem?.labelId : undefined"
>
@@ -66,7 +66,7 @@ watch(
() => props.modelValue,
() => {
if (props.validateEvent) {
- elFormItem.validate?.('change').catch((err) => debugWarn(err))
+ elFormItem?.validate('change').catch((err) => debugWarn(err))
}
}
)
diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts
index 5ba2f10aed..dc2b08560a 100644
--- a/packages/components/checkbox/src/checkbox.ts
+++ b/packages/components/checkbox/src/checkbox.ts
@@ -1,8 +1,12 @@
import { computed, getCurrentInstance, inject, nextTick, ref, watch } from 'vue'
import { toTypeString } from '@vue/shared'
import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { formContextKey, formItemContextKey } from '@element-plus/tokens'
-import { useFormItemInputId, useSize, useSizeProp } from '@element-plus/hooks'
+import {
+ useFormItem,
+ useFormItemInputId,
+ useSize,
+ useSizeProp,
+} from '@element-plus/hooks'
import {
debugWarn,
isArray,
@@ -10,8 +14,8 @@ import {
isNumber,
isString,
} from '@element-plus/utils'
+
import type { ComponentInternalInstance, ExtractPropTypes, PropType } from 'vue'
-import type { FormContext, FormItemContext } from '@element-plus/tokens'
import type { ICheckboxGroupInstance } from './checkbox.type'
import type Checkbox from './checkbox.vue'
@@ -101,14 +105,13 @@ export const checkboxProps = {
}
export const useCheckboxGroup = () => {
- const elForm = inject(formContextKey, {} as FormContext)
- const elFormItem = inject(formItemContextKey, {} as FormItemContext)
+ const { form: elForm, formItem: elFormItem } = useFormItem()
const checkboxGroup = inject('CheckboxGroup', {})
const isGroup = computed(
() => checkboxGroup && checkboxGroup?.name === 'ElCheckboxGroup'
)
const elFormItemSize = computed(() => {
- return elFormItem.size
+ return elFormItem?.size
})
return {
isGroup,
@@ -312,7 +315,7 @@ const useEvent = (
() => props.modelValue,
() => {
if (validateEvent.value) {
- elFormItem?.validate?.('change').catch((err) => debugWarn(err))
+ elFormItem?.validate('change').catch((err) => debugWarn(err))
}
}
)