ant-design组件库form表单如何进行异步校验

Question

问题描述

ant-design组件库form表单如何进行异步校验

问题出现的环境背景及自己尝试过哪些方法

我用的是redux，内部没有维护state，我用的是onvalueschange，mapPropsToFields那一套东西，之后，我现在想把一个shopid在输入完blur之后发起ajax请求，然后等待返回值回来的时候去触发callback(new Error(''))显示红字的这种，我用了promise去return一个值（也用了async，await）回来进行判断然后输出callback，但是callback上面和下面的console都能打出来，唯独这个callback显示不在页面，还有就是我其他的表单项，当我点击提交，总体校验的时候，也不显示那些callback的提示红字

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

我希望能够进行校验（异步同步都要），自从我用了onvalueschange，mapPropsToFields之后，校验就不好使了

Answer 1

antd 的From的 validator 采用的是async-validator

这个组件本来就支持ajax校验：

const fields = {
  asyncField:{
    validator(rule,value,callback){
      ajax({
        url:'xx',
        value:value
      }).then(function(data){
        callback();
      },function(error){
        callback(new Error(error))
      });
    }
  },
 
  promiseField:{
      validator(rule, value){
        return ajax({
          url:'xx',
          value:value
        });
      }
    }
};

Answer 2

请问你这些东西是直接写在类似下面这个部分的吗

Answer 3

只会执行一次