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

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

* chore: fix error
This commit is contained in:
zz 2022-08-05 21:45:17 +08:00 committed by GitHub
parent 2a926bbc6e
commit 2d450be082
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 9 deletions

View File

@ -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))
}
}
)

View File

@ -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))
}
}
)