解决ant Design中this.props.form.validateFields未执行的问题
在使用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未执行的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Ant Design moment对象和字符串之间的相互转化教程
moment对象转字符串 values.saleStartTime=values.saleStartTime.format('YYYY-MM-DD'); 字符串转moment对象 this.model.saleStartTime=moment(record.saleStartTime); 补充知识:vue ant design 的日期组件range-picker表单中进行moment赋值问题 官方文档这样写 参数 说明 类型 showTime.defaultValue 设置用户选择日期时默认的时
-
解决antd Form 表单校验方法无响应的问题
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动
-
解决Antd Table组件表头不对齐的问题
背景: 在使用Antd的table组件时,由于表头参数过多,于是设置了scroll属性,在其超出一定宽度后进行滚动 但是在添加了该属性之后,经常会出现表头不对齐的问题: 针对该问题Google 了一下解决方案,但大多不是很完善,为解决问题.现整理下完整的解决方案: 1.对表格的每一行 [columns]设置width属性(留出一行进行宽度自适应): 2.scroll属性中的x选择一个合适的值(或者直接设为 max-content): 如果以上两步仍解决不了对齐问题的话,请继续第三步操作 3.对t
-
Antd表格滚动 宽度自适应 不换行的实例
我就废话不多说了,大家还是直接看代码吧~ <Table className={styles.table} rowKey={(record) => record.key} columns={columns} dataSource={dataSource} scroll={{ x: 'max-content' }} // 加上这条 横向滚动 支持此属性的浏览器内容就不会换行了 pagination={false} /> styles.less .table { :global { .ant-
-
antd 表格列宽自适应方法以及错误处理操作
当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量 也就是没有设置宽度的列会平分表格中余下的宽度 在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, 那么他们会按照设置宽度的比例瓜分表格的宽度 表格横向滚动, 序号, 权属人左定位 antd 中的表格列固定是隐藏原列, 然后又在上面覆盖新列实现的, 也就是说白色部分实际是原列, 只不过是被隐藏了 这个表格中只有序号有固定宽度, 那么余下所有列平分表格剩余宽度, 被定为的权属人的新
-
antd-DatePicker组件获取时间值,及相关设置方式
DatePicker组件默认语言是英语,需要设置为中文的话,需要安装moment. import moment from "moment"; import "moment/locale/zh-cn" format属性,设置日期的格式,如"2020-02-28". 设置日期 选择日期是今天之前[包含今天] 需要和moment搭配应用 // 设置默认的起始日期 const disabledDate = (current) => { consol
-
Antd的table组件表格的序号自增操作
1,效果图 2,实现方法 const columns = [ { title: '序号', render:(text,record,index)=>`${index+1}`, }, { title:'操作', dataIndex:'delete', key:'delete', render: (text,record) => ( <span> <Link to={{ pathname : '/info/Edit' , query : { id : record.id }}}&
-
解决ant Design中this.props.form.validateFields未执行的问题
在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行,也没有报错. 原因: 我使用了自定义校验 validator ,在自定义校验方法中有个错误,使用了未定义的变量. 注意: 1.使用validator 时,注意自定义方法中是否有错误:对于如何解决没有错误提示,官网提示:可以选择通过 async 返回一个 promise 或者使用 try...catch进行错误捕获,
-
解决ant Design中Select设置initialValue时的大坑
我出现的问题:例如在编辑活动关联红包的时候,需求是select显示的是红包名称,但是表单提交的时候是红包ID:设置默认值的initialValue为Id的时候,会出现显示是id (需要的是显示名称):如果设置默认值initialValue是名称,那么下一步操作会出现报错 但是我还有一种情况:某个活动关联的红包被删除了,在Select中的可供选项中redPackets没有这个红包的时候,显示的会是红包id,而不是红包名称 错误效果图: 期待正确效果图 解决方案:在默认值的后面加上一个空字符串进行转
-
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
场景描述: 如下图所示,点击减免天数会出现一个弹窗, 输入天数后点击确定,保存这个值, 但是我在点第二行的减免天数的时候初始应该是空的, 可是现在显示的是第一行输入的值: <Modal title="减免天数" visible={that.state.visible} onOk={that.handleOk.bind(that)} onCancel={that.handleCancel} > <Form horizontal form={form}> <F
-
解决ant design vue中树形控件defaultExpandAll设置无效的问题
页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe
-
Ant Design中使用css切换的问题及解决
目录 Ant Design使用css切换问题 1.绑定一个自定义属性 2.css模块化 3.Ant Design主题方案 4.css in js ant design中css样式覆盖问题 Ant Design使用css切换问题 当想通过开关来控制主题颜色时,就必须控制css的变化,现就记录使用Ant Design切换主题过程中发现的一些问题. 切换主题的方法: 1.绑定一个自定义属性 通过绑定一个自定义属性,一键改变html的整体样式.但缺点也很明显,他仅适用于原生的样式(css全部由自己定义)
-
解决ant design vue 表格a-table二次封装,slots渲染的问题
目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&
-
解决ant Design Search无法输入内容的问题
我的问题:今天先根据手机号查询一个用户,根据文档引用Input中的Search,我添加了一个样式,发现输入框无法输入内容, 代码: return ( <div> <Search style={{ width: 300, float: "right" }} placeholder="手机号" onSearch={value => this.findAppUserByPhoneNo(value)} onChange={this.onChangeP
-
ant design中upload组件上传大文件,显示进度条进度的实例
Upload组件是自带上传进度,但是样式调起来很麻烦,我们要做的就是自定义一个 首先页面要引入组件 Upload, Progress uploadAttachmentsProps = { action: `/api/upload`, showUploadList: false, // 这里关闭自带的列表 beforeUpload: (info) => { /* 上传前的钩子,可以用来判断类型,和大小 if ('是否符合类型') { return false } if ('是否符合类型') { r
-
ant design中实现table的表格行的拖拽
前言: 首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的 完全没有思路, 然后就打开官网的文档进行观看.一开始准备写 打开官网的一个文档是4.0的 看起来也是一脸的蒙蔽,接着找到3的一个文档,接下来直接说说如何让实现当前这个功能上代码 代码部分: import { Table } from 'antd'; import { DndProvider, DragSource, DropTarget } from 'react-dnd'; import { HTML5Backend } fr
-
vue用ant design中table表格,点击某行时触发的事件操作
使用customRow 设置行属性,写对应事件 :customRow="rowClick" 然后在data里面写 rowClick: record => ({ // 事件 on: { click: () => { // 点击改行时要做的事情 // ...... console.log(record, 'record') } } }) 在官方文档中也写的很清楚 补充知识:Ant-Design-Vue table 合并单元格,并且添加点击事件 点击行,有一个customRow.
随机推荐
- JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
- angularjs项目的页面跳转如何实现(5种方法)
- Oracle数据更改后出错的解决方法
- jquery实现弹出层遮罩效果的简单实例
- nginx配置访问图片路径以及html静态页面的调取方法
- 原生js实现水平方向无缝滚动
- 浅谈java常量池
- 原生js实现tab选项卡切换
- javascript笛卡尔积算法实现方法
- bootstrap输入框组代码分享
- JavaScript.Encode手动解码技巧
- Windows中安装Apache2和PHP4权威指南
- PHP投票系统防刷票判断流程分析
- 深入C语言把文件读入字符串以及将字符串写入文件的解决方法
- javascript中数组的定义及使用实例
- bootstrap输入框组使用方法
- C++基本算法思想之递推算法思想
- 改善你的jQuery的25个步骤 千倍级效率提升
- Javascript动画的实现原理浅析
- Linux环境下使用XFS文件系统