您的位置：首页 > 编程技术 > js  >  解决ant Design中this.props.form.validateFields未执行的问题

解决ant Design中this.props.form.validateFields未执行的问题

 更新时间：2020年10月28日 09:50  点击：3334

在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行，也没有报错。

原因：

我使用了自定义校验 validator ，在自定义校验方法中有个错误，使用了未定义的变量。

注意：

1、使用validator 时，注意自定义方法中是否有错误；对于如何解决没有错误提示，官网提示：可以选择通过 async 返回一个 promise 或者使用 try...catch进行错误捕获，具体查看官网form组件；

2、使用validator 时，自定义方法中 callback 必须被调用。

补充知识：ant design vue 表单域的validateFields取值和子item的change取值的先后问题

废话不多，先咔的撸出代码先

我先在created中初始化表单域form

然后在表单域子节点中绑定@change="handleChange"函数，

然后我设想是每一次单选完后打印出单选后的值

然而结果是每次打印的值是单选前的值，比如：

我开始时默认选正常，第一次选异常，打印出正常

第二次选正常，结果打印出异常

我懵逼了，一般出现这种情况应该是跟事件机制同步或者异步的先后顺序有关，于是仔细设置了validateFields为异步输出

这回输出正常了，

果然是，个人猜测是输入框的change事件赋值发生在表单域的validateFields（）事件之后，导致取到的值是修改前的值

以上这篇解决ant Design中this.props.form.validateFields未执行的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持猪先飞。

[!--infotagslink--]

相关文章

  • 使用Vant完成通知栏Notify的提示操作

    这篇文章主要介绍了使用Vant完成通知栏Notify的提示操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-11

  • ant design中upload组件上传大文件,显示进度条进度的实例

    这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29

  • 解决ant Design中this.props.form.validateFields未执行的问题

    这篇文章主要介绍了解决ant Design中this.props.form.validateFields未执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-28

  • 解决vant-UI库修改样式无效的问题

    这篇文章主要介绍了解决vant-UI库修改样式无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-03

  • vant 解决tab切换插件标题样式自定义的问题

    这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-14

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    这篇文章主要介绍了详解基于Vue cli开发修改外部组件Vant默认样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-04

  • 基于Bootstrap实现Material Design风格表单插件 附源码下载

    Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载，感兴趣的朋友参考下...2016-04-19

  • 微信小程序引入Vant框架的全过程记录

    Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用,这篇文章主要给大家介绍了关于微信小程序引入Vant框架的相关资料,需要的朋友可以参考下...2021-06-08

  • 使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

    最近接了个项目需要开发一个app项目，由于是第一次接触这种app开发，经过一番思考，决定使用Vue3+Vant前端组件的模式进行开发，下面把问题分析及实现代码分享给大家，需要的朋友参考下吧...2021-06-10

  • Vant+postcss-pxtorem 实现浏览器适配功能

    这篇文章主要介绍了Vant+postcss-pxtorem 实现浏览器适配,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-05

  • 基于Vant UI框架实现时间段选择器

    这篇文章主要为大家详细介绍了基于Vant UI框架实现时间段选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-12-24

  • win10下使用virtualbox + vagrant配置ruby开发机环境

    Vagrant是一个基于Ruby的工具，用于创建和部署虚拟化开发环境。它 使用Oracle的开源VirtualBox虚拟化系统，使用 Chef创建自动化虚拟环境。搭配Cmder如丝般顺滑,实现你所有关于Mac&Linux的幻想...2020-06-30

  • vant时间控件使用方法详解

    这篇文章主要为大家详细介绍了vant时间控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-12-24

  • vue+vant实现购物车全选和反选功能

    这篇文章主要为大家详细介绍了vue+vant实现购物车全选和反选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-11-17

  • Ant Design的Table组件去除

    这篇文章主要介绍了Ant Design的Table组件去除“取消排序”选项操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25

  • vant的Uploader 文件上传,图片数据回显问题

    这篇文章主要介绍了vant的Uploader 文件上传,图片数据回显问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2022-10-21

  • 浅谈MySQL中授权(grant)和撤销授权(revoke)用法详解

    下面小编就为大家带来一篇浅谈MySQL中授权(grant)和撤销授权(revoke)用法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-09-18

  • 解决vant title-active-color与title-inactive-color不生效问题

    这篇文章主要介绍了解决vant title-active-color与title-inactive-color不生效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-03

  • Mysql复制表三种实现方法及grant解析

    这篇文章主要介绍了Mysql复制表三种实现方法及grant解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-10

  • DesignMantic免费在线制作网站LOGO工具

    免费获取我们快速便捷的logo设计工具,您可以免费使用。只有当您喜欢时,才需要付款,下面我们就来看DesignMantic免费在线制作网站LOGO工具使用吧。 虽然如今架设一...2016-10-10