ant-design-vue a-form 无法校验自定义组件

最新推荐文章于 2026-02-17 13:04:51 发布

原创最新推荐文章于 2026-02-17 13:04:51 发布 · 1.4k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

ant-design-vue

代码可运行

文章描述了一个在AntDesignVue3.0.0-beta.7版本的项目中遇到的问题，即表单无法对自定义的Upload组件进行校验。问题的原因是自定义组件需要主动通知外部Form进行校验。解决方法是通过调用Form组件的内部方法onFieldChange来触发校验。在组件内部实现此功能，例如在选文件操作后调用onFieldChange。

问题背景

项目中有一个需求，利用form表单校验表单内部值是否合法，当时需要校验一个自定义upload组件上传文件，按照官方文档的方式绑定对应的变量，校验官方input、select等组件都是能够成功的，但是校验自定义的upload组件却始终无法生效。当时使用版本为：
“ant-design-vue”: “^3.0.0-beta.7”

<!-- 选择文件 -->
    <a-form-item v-if="model.datasetType" name="jobIdList" >
        <a-row> 
            <a-col :span="3" style="display: flex;justify-content: flex-end;">
                <span style="color: red;font-size: 20px;">*</span>
                <span style="margin-right: 10px;">{{$t('speech-annotations.task-management.file')}}</span>
            </a-col>
            <a-col :span="21">
                <AnnotateUpload @uploadSuccess="model.jobIdList = model.jobIdList.concat($event)" @removeFile="deleteFile($event)">
                    <a-button type="primary" size="small">
                        <cloud-upload-outlined/>
                        {{$t('speech-annotations.task-management.select-file')}}
                    </a-button>
                </AnnotateUpload>
            </a-col>
        </a-row>
    </a-form-item>

问题原因

form表单无法主动校验自定义组件，需要由组件内部通知外部form表单进行校验。

解决方法

组件内部主动通知form表单校验，调用ant-design-vue提供的Form组件内部的方法。

import { TableColumnType, Form } from 'ant-design-vue';
export default class ChooseMember extends Vue {
	private formItemContext = Form.useInjectFormItemContext();
	// 在需要校验的时候调用onFieldChange方法
	public select(): void {
        this.formItemContext.onFieldChange();
    }
}