- 报错[antdv: Form.Item] Cannot generate
validateStatus
andhelp
automatically
分析:此类问题,一般都是a-form-item标签下,包含了多个 v-decorator属性导致的
解决:1.保障只有一个 v-decorator即可;2.如果需要一个 FormItem 中多个被装饰过的表单元素,就需要自己配置 help, required, validateStatus 即可,具体操作如下:
<template>
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="地址"
:help="help"
:validateStatus="validateStatus"
>
<a-input-group compact>
<a-select
style="width:33%"
placeholder=" - "
v-decorator="['provinceId', validatorRules.provinceId]"
@change="handleCityChange"
>
<a-spin v-if="regionList.province.fetch" slot="notFoundContent" size="small" />
<a-select-option
v-for="i in regionList.province.list"
:key="i.id"
:title="i.regionName"
>{{ i.regionName }}</a-select-option>
</a-select>
<a-select
style="width:33%"
placeholder=" - "
v-decorator="['cityId',validatorRules.cityId]"
@change="handleCityChange"
>
<a-spin v-if="regionList.city.fetch" slot="notFoundContent" size="small" />
<a-select-option
v-for="i in regionList.city.list"
:key="i.id"
:title="i.regionName"
>{{ i.regionName }}</a-select-option>
</a-select>
<a-select
style="width:33%"
placeholder=" - "
v-decorator="['areaId', validatorRules.areaId]"
>
<a-spin v-if="regionList.area.fetch" slot="notFoundContent" size="small" />
<a-select-option
v-for="i in regionList.area.list"
:key="i.id"
:title="i.regionName"
>{{ i.regionName }}</a-select-option>
</a-select>
</a-input-group>
</a-form-item>
<a-form-item :wrapperCol="offsetWrapperCol">
<a-button type='primary' @click="handleSubmit">提交</a-button>
</a-form-item>
</a-form>
</template>
<script>
export default {
name: 'address-modal',
data() {
return {
// 自定义校验信息
validateStatus: '',
help: '',
form: this.$form.createForm(this),
confirmLoading:false,
// 校验规则
validatorRules: {
provinceId: { rules: [{ required: true, message: '请选择省份' }] },
cityId: { rules: [{ required: true, message: '请选择城市' }] },
areaId: { rules: [{ required: true, message: '请选择地区' }] },
},
// 城市列表数据
regionList: {
province: {
list: [],
fetch: false
},
city: {
list: [],
fetch: false
},
area: {
list: [],
fetch: false
}
},
// 表单栅格
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
offsetWrapperCol: {
xs: { span: 24 },
sm: { span: 16, offset: 5 }
},
}
},
methods: {
handleSubmit() {
// 监听表单提交事件,触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
// 这里是验证通过之后的操作
} else {
// 校验失败,自定义校验信息
// 这边三个值依次取值,返回第一个有错误信息的属性
const onErr = err.provinceId || err.cityId || err.areaId
if (onErr && onErr.errors) {
// 如果有错误信息,设置错误状态
this.validateStatus = 'error'
// 一个错误信息内部是校验内容是以数组的形式返回的,可以在data.validatorRules中的rules中看到顺序
this.help = onErr.errors[0].message
} else {
// 如果没有报错的情况
this.validateStatus = 'success'
this.help = ''
}
}
})
},
handleCityChange(value, option) {
// 这里是监听改变的业务逻辑,比如获取下级地址列表
},
}
}
标签:vue,span,help,err,rules,校验,ant,desgin,validateStatus
From: https://www.cnblogs.com/charlesxiao/p/17105137.html