From 2d450be08229f407948420ce8d8a529b64d143d8 Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Fri, 5 Aug 2022 21:45:17 +0800
Subject: [PATCH] fix(components): [checkbox] injected form context may be
 undefined (#8865)

* fix(components): [checkbox] injected form context may be undefined

* chore: fix error
---
 .../components/checkbox/src/checkbox-group.vue  |  4 ++--
 packages/components/checkbox/src/checkbox.ts    | 17 ++++++++++-------
 2 files changed, 12 insertions(+), 9 deletions(-)

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"
   >
     <slot />
   </component>
@@ -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<ICheckboxGroupInstance>('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))
       }
     }
   )