表单校验获取不到 validate 方法

[515789588]

• I'm sure this does not appear in the issue list of the repository

为什么使用表单校验的时候无法调用validate等方法，明明定义了ref 代码写的也没有错

Basic Info

• Package Name And Version: @arco-design/web-vue@2.57.0
• Browser: chrome140.0.0.0

Steps to reproduce

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance } from '@arco-design/web-vue'

const formRef = ref<FormInstance | null>(null)

const formData = reactive({
  name: '',
})

const rules = {
  name: [
    { required: true, message: 'Please input your name', trigger: 'blur' }
  ]
}

const handleValidate = async () => {
  console.log('formRef.value 👉', formRef.value)
  console.log('validate 👉', formRef.value?.validate)

  if (!formRef.value) return

  try {
    const res = await formRef.value.validate()
    console.log('✅ validate result:', res)
  } catch (err) {
    console.log('❌ validate error:', err)
  }
}

const printRef = (el) => {
  formRef.value = el
  console.log('formRef.value keys 👉', Object.keys(formRef.value!))
}
</script>

<template>
  <a-form :ref="printRef" :model="formData" :rules="rules" >
    <a-form-item field="name" label="Name">
      <a-input v-model="formData.name" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="handleValidate">Validate</a-button>
    </a-form-item>
  </a-form>
</template>

结果输出了

 ['model', 'layout', 'size', 'labelColProps', 'wrapperColProps', 'labelColStyle', 'wrapperColStyle', 'labelAlign', 'disabled', 'rules', 'autoLabelWidth', 'id', 'scrollToFirstError', 'cls', 'formRef', 'handleSubmit', 'innerValidate', 'innerValidateField', 'innerResetFields', 'innerClearValidate', 'innerSetFields', 'innerScrollToField']

这些是组件内方法？ 而官方文档上的validate方法并不存在

vite.config.ts

plugins: [
  AutoImport({
        imports: [
          'vue', // 自动导入 ref, reactive, computed, watch 等
          'vue-router', // 自动导入 useRoute, useRouter
          '@vueuse/core', // 如果你用 VueUse 也可以加上
        ],
        resolvers: [ArcoResolver()],
        dts: 'src/auto-imports.d.ts', // 生成类型声明文件
        vueTemplate: true, // 允许在模板中直接使用 ref/reactive
      }),

  Components({
        resolvers: [
          ArcoResolver({
            sideEffect: true, // 启用副作用以支持主题
            importStyle: 'less', // 启用 Less 样式导入以支持主题定制
          }),
        ],
      }),
]

[feichengnana]

我这也是，有结果了吗？看着封装的思路挺好的，刚尝试用，没想到一堆问题

[seepine]

可以bilibili搜下vue3组件二次封装，通过代理把方法抛出去，不仅ref，还有slot都可以抛出还有类型提示

[kunl]

const error = await formRef.value?.validate()
if (!error) {}

异步的方法

[Rochsen]

const error = await formRef.value?.validate() if (!error) {}

异步的方法

没用的，formRef.value不存在validate函数，这个问题我也遇到了