tabs中实现多个form不能激活验证的情况 #1216
Description
Version
1.3.14
Environment
chrome,vue 2.6.10
Reproduction link
Steps to reproduce
用tabs实现单页多个表单(非stepform表单方式),如
<template>
<div :class="prefixCls">
<a-tabs :activeKey="activeTab" @change="changeFormTab">
<a-tab-pane tab="基本信息" key="base">
<a-form :form="forms['base']">
<a-form-item label="标题1" >
<a-input v-decorator="['title',{'initialValue': data.title,rules: validatorRules.title}]" placeholder="请输入产品标题" />
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane tab="详细信息" key="detail">
<a-form :form="forms['base']">
<a-form-item label="标题2" >
<a-input v-decorator="['title',{'initialValue': data.title,rules: validatorRules.title}]" placeholder="请输入产品标题" />
</a-form-item>
</a-form>
</a-tab-pane>
</a-tabs>
<a-button class="btn_submit" @click="handleSubmit" type="primary">保存</a-button>
</div>
</template>
<script>
import WEditor from 'wangeditor'
export default {
data() {
return {
activeTab: 'base',
forms: {
base: null,
detail: null
},
formData: {},
validatorRules: {
title: [{
required: true,
message: 'title不能为空',
trigger: 'blur'
}],
title2: [{
required: true,
message: 'title2不能为空',
trigger: 'blur'
}],
}
isValidateFaild: true, // 表单是否验证失效
faildFormKey: '', // 验证失效的表单key
multFormData: {}
},
methods: {
initForm() {
for (const key in this.forms) {
this.forms[key] = this.$form.createForm(this)
}
},
// 确认提交
handleSubmit() {
// 是否验证失败
this.isValidateFaild = false
for (const key in this.forms) {
this.forms[key].validateFields((err, values) => {
if (err) {
this.isValidateFaild = true
this.faildFormKey = key
return false
} else {
this.multFormData = Object.assign(this.multFormData, values)
}
})
console.log(this.formData)
}
}
}
}
</script>
What is expected?
在某个form验证失败的时候切换止对应的tab
What is actually happening?
未触发验证并切换至对应的tab，点击每个tab后才可以实现触发验证并切换tab