题目描述
antdesign用了Form.create的onvaluesChange和mapPropsToFields那一套之后校验不显示了
题目来源及自己的思路
我这块由于有联动的东西,所以用了onvaluesChange和mapPropsToFields,但是发现校验的红色全都不显示了,有的只会在console里面展示
这块我尝试用过async-validator,尝试返回一个promise或者是直接async,await,但是我在返回之后比如
{
validator: async (rules, value, callback) => {
this.props.queryShopBankInfo(value)
const result = await this.props.queryShopByShopId(value)
console.log('result', result)
callback(new Error('门店ID不存在'))
console.log(111)
}
}
上面的console和下面的console都可以在浏览器里面看到,但是这个callback就是展示不出来
下面这种也是不行的
var descriptor = {
contactPerson: {
type: 'string',
required: true,
message: '啊啊、!',
validator (rule, value, callback) {
if (value.trim() === '') {
callback(new Error('请输入aa'))
}
}
}
}
var validator = new Schema(descriptor)
{getFieldDecorator('contactPerson', {
rules: validator.rules.contactPerson,
initialValue: (feeApplyInfo && feeApplyInfo.contactPerson) || ''
})(
<Input
placeholder='最多20个字符'
/>
)}
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
{getFieldDecorator('targetNo', {
rules: [{
max: 30, message: '最多可输入30个字符!'
}, {
required: true, message: '请输入付款对象!'
}],
initialValue: (feeApplyInfo && feeApplyInfo.targetNo) || ''
})(
<Input placeholder='最多30个字符' />
)}
onValuesChange (props, changedFields) {
const names = Object.keys(changedFields)
if (names.length !== 1) return
let name = names[0]
switch (name) {
/此处省略/
default:
onUpdateCompensateApplyForm(name, changedFields[name])//这块进行更新
// console.log('不能识别传入对象')
}
你期待的结果是什么?实际看到的错误信息又是什么?
我期待能够解决这个表单的校验问题,(用onchange是没有这种表单校验问题的)
然后现在就是我比如在输入框里面没有办法我不满足校验规则就直接红字展示,而且只有我通过点击表单的提交按钮才会整体去校验(这里面也不会在页面有红字报错提示,只会在console里面展示)
目前展示是这样的,只有这个图而已
请问解决了么