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

问题背景

项目中有一个需求，利用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();
    }
}