问题背景
项目中有一个需求,利用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();
}
}