写FormModel表单时出现了要同时使用 v-model 和 change方法 的需求
<a-form-model-item label="应用" prop="clients">
<a-select
show-search
v-model="clearSelect"
@search="searchClient"
@change="changeClient"
placeholder="请输入或选择应用">
<a-select-option v-for="item in clientList" :key="item.id" :item="item">
{{item.clientId}}
</a-select-option>
</a-select>
</a-form-model-item>
结果下拉框无法使用了,并出现了以下报错
错误的意思是change.apply未定义
原因在管网FormModel文档的API处有提醒:
意思就是From.Item把input、select等表单项的blur、change事件劫持了,用来做自动效验,如果我们要给input、select写blur、change怎么办呢?
按照官网的写法做,但是要注意几个点:
1、要给a-form-model-item设置一个ref引用名称。
2、autoLink要设置成false,表示是否自动关联表单域,对于大部分情况都可以使用自动关联,如果不满足自动关联的条件,可以手动关联。
3、定义change事件,最后写上:this.$refs.clients.onFieldChange(),用于表单的自动效验。
最后完整的代码:
<a-form-model-item label="应用" prop="clients" ref="clients" :autoLink="false">
<a-select
show-search
v-model="clearSelect"
@search="searchClient"
@change="changeClient"
placeholder="请输入或选择应用">
<a-select-option v-for="item in clientList" :key="item.id" :item="item">
{{item.clientId}}
</a-select-option>
</a-select>
</a-form-model-item>
changeClient(value) {
console.log(value)
// TODO
this.$refs.clients.onFieldChange()
}
clients 与 ref="clients"内容对应
onFieldChange() 对应rules的触发方式 change
onFieldBlur() 对应rules的触发方式 blur