如何在自定义组件中触发elementplus中elform的表单验证

138 阅读1分钟

参考elementplus中elinput的源码 github.com/element-plu…

通过调用useFormItem这个hooks获取到elFormItem实例, elFormItem是通过provide/inject注入的,调用其validate方法激活验证

以下是部分源码

import {
  useFormDisabled,
  useFormItem,
  useFormItemInputId,
  useFormSize,
} from '@element-plus/components/form'
// ...
const { form: elForm, formItem: elFormItem } = useFormItem()
// ...
watch(
  () => props.modelValue,
  () => {
    nextTick(() => resizeTextarea())
    if (props.validateEvent) {
      elFormItem?.validate?.('change').catch((err) => debugWarn(err))
    }
  }
)

在自定义组件中参考如上写法

import { useFormItem } from 'element-plus'
const { formItem: elFormItem } = useFormItem()

function handleInput(){
    elFormItem?.validate?.('change').catch(err=>console.warn(err))
}