公司的新项目是用vue3.0+ant design vue去写的，但是最近发现表单校验时有些表单内的元素没法校验。
<a-row :gutter="16">
<a-col :span="12">
<a-form-item name="group">
<label class="form-label">Group</label>
<a-select v-model:value="formState.group" placeholder="select group">
<a-select-option v-for="item in groupList" :value="item.group_id" :key="item.group_id">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<!-- 其他内容 -->
</a-col>
</a-row>
代码里是有添加rule去校验的
const formRef = ref<any>(null)
const formState: UnwrapRef<FormState> = reactive({
group: undefined,
role: undefined
});
const rules = {
group: [
{required: true, message: '请选择用户组', trigger: 'change'},
]
}
return {
rules,
formRef
}
但无论是select组件chang时还是填满表单再提交，都是校验不通过，表单提示表单项信息未填。
然后注意到官方文档有这么 一段内容
注意：
Form.Item 会对唯一子元素进行劫持，并监听 blur 和 change 事件，来达到自动校验的目的，所以请确保表单域没有其它元素包裹。如果有多个子元素，将只会监听第一个子元素的变化。
官方给出的解决示例如下
<a-form-item name="form.name" ref="name" :autoLink="false">
<a-input v-model:value="other" />
<span>hahha</span>
<div>
<a-input
v-model:value="form.name"
@blur="() => {$refs.name.onFieldBlur()}"
@change="() => {$refs.name.onFieldChange()}"
/>
</div>
</a-form-item>
照搬到项目里，控制台打印出报错信息，提示该ref并没有此方法
懵住了...最后参照文章
但与文章不同的是，我没有validateField方法，细看打印出refs的内容，发现他有validateFields这样一个方法
console.log
于是替换过来，发现问题解决，代码如下
<a-row :gutter="16">
<a-col :span="12">
<a-form-item name="group">
<label class="form-label">Group</label>
<a-select v-model:value="formState.group" placeholder="select group">
<a-select-option v-for="item in groupList" :value="item.group_id" :key="item.group_id">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
const formRef = ref<any>(null)
const formState: UnwrapRef<FormState> = reactive({
group: undefined
});
const rules = {
group: [
{required: true, message: '请选择用户组', trigger: 'change'},
]
}
const codeverif = (item:string) => {
console.log(unref(formRef))
unref(formRef).validateFields(item)
}
return {
rules,
formRef
}
但是，天啊怎么还有但是...
提交表单时又出现了新问题,控制台报错信息如下
console.log
按照字面意思去理解，就是跟表单输入的type有关，那就把校验规则里的type字段给补上（但很奇怪，type明明不是必选的）
const rules = {
group: [
{required: true,type: number, message: '请选择用户组', trigger: 'change'},
]
}
最后，表单终于能正常校验了，不报错了
