使用antd遇到的问题（Form）

已于 2022-11-08 14:26:32 修改
阅读量206 收藏
点赞数
分类专栏： 工作遇到的问题 文章标签： javascript
于 2022-11-08 14:24:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Concentrateon/article/details/127750011
版权
  1. Form.Item中rules有个自定义校验validator，可以自定义校验规则，特别适合不同校验产生不同结果
  2. 问题1：校验时机为当前input发生改变时，校验当前input，因此如果是否警告受其他input影响的话，改变其他input，不会警告
  3. 解决：出口，比如保存按钮，点击时先校验全部
  4. 解决2：可以在Form上onchange校验全部
GreatCodeFarmer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd 的form表单submit提交不生效_快速了解JavaScript的表单操作
weixin_28676397的博客
01-28 1911
前言在 HTML 中使用 表单元素在 JavaScript 中对应的是 HTMLFormElement 类型，而HTMLFormElement继承了HTMLElement接口：interface HTMLFormElement extends HTMLElement { ...}因此，HTMLFormElement 除了与 HTMLElement有一样的属性和方法外，还有自己独有...
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
weixin_30954607的博客
07-31 1306
<a-form-item :label="label+'图片'" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }" id="picture" // 只需加个与校验(roomPicture)不同名的id即可 > <a-upload :action="...
antd Form组件表单在vue3中的使用
Hiroshi's
04-11 5974
antd Form表单组件有个最需要注意的问题，官方文档里写的很清楚： 这是什么意思，我们下面说个例子就明白了： <template> <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" > <a-form-item ref="username" name="user
Vue中使用antd Table，columns中 title自定义无法访问this
coding...
01-17 910
Vue中使用antd Table，columns中 title自定义无法访问this
el-form组件如何清除校验提示（前端技能提升）
最新发布
2201_75705263的博客
10-26 2850
el-form组件如何清除校验提示
解决antd的Form组件setFieldsValue的警告问题
01-21
使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告，字面意义去看是说在 render之前设置了表单值的问题。 解决 在使用...
antd遇到的问题汇总
01-08
遇到问题看文档一般都可以得到解决。 table添加滚动条以后表格对不齐 官方文档给出的解释： 若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一...
基于antd4二次封装的form组件
12-31
然而，原始的antd Form组件可能无法满足所有项目中的复杂业务逻辑，因此，二次封装是为了提高代码复用性、增强功能性和简化使用方式。 二次封装的过程通常包括以下几个步骤： 1. **组件抽象**：将项目的共性需求...
在antd4.0中Form使用initialValue操作
01-18
然后我在网上看用resetFields()这个方法，每次提交或者取消之后重置一下数据，然而我试了还是不得行，会变成每次点击显示的是上一次的数据，所以后面还是老老实实看了一下form的其他方法。 贴个图 解决 放弃initial...
antd form表单数据回显操作
01-22
import { Table, Button, message, Input, Select, Modal, } from 'antd'; const Option = Select.Option; import AddOrEdit from './AddOrEdit ' class List extends React.Component { constructor(props) { ...
vue3下antd组件a-tree-select树形选择器treeNodeFilterProp切换title值查询失败
weixin_43996368的博客
08-30 4474
vue3下antd组件a-tree-select树形选择器treeNodeFilterProp切换title值查询失败bug复现初始菜单初始查询结果原因定位修改方法方法实现使用treeNode.props.title.children[0].children[0].children原理 bug复现 初始菜单 初始查询结果 原因定位 之前在vue2＋ant-design-vue@^1.7.4，使用时，将tree API的treeNodeFilterProp属性设置为title，就可以针对title属性值进
ant design表单修改后立即提交表单，验证总是失败，但验证规则全部通过
miin_ying的博客
02-15 843
ant design表单验证结果outOfDate为true时的处理
antd form使用pattern和validator自定义校验规则
热门推荐
MFWSCQ的博客
11-19 2万+
在使用antd的form表单的时候肯定会用到表单校验，antd的表单校验今天仔细看了下还是很好用的，不仅有默认的一般校验，还支持两种自定义校验规则的方式。 antd有默认的几种校验规则如： enum：枚举类型 len：字段长度 max：最大长度 min:最小长度 required：是否必选 自定义校验规则有两种方式：通过validator方法进行自定义校验 和 使用pattern进行自...
antd表单自定义验证规则
lovezhuer1的博客
01-14 1252
antd表单验证 手机号码格式校验 /** - 手机号码格式校验 - @param {*} _ - @param {*} value */ export const validateMobile = (_, value) => { const reg = /^1\d{10}$/; return !value || reg.test(value) ? Promise.resolve() : Promise.reject('手机号码格式不正确'); }; 固定电话格式校验 /**
2020-10-25
liyunlongA的博客
10-25 175
/etc/passwd 字段讲解：用户名:密码:uid :gid :用户描述:家目录:登陆shell /etc/shadow 字段讲解：登录名:加密口令:最后-次修改时间:最小时间间隔:最大时间间隔:警告时间:不活动时间:失效时间:标志
electron-vue [Vue warn]: Failed to resolve directive: decorator
weixin_30508309的博客
08-25 1029
electron-vue引入ant-desigin-vue使用ant自定义指令 v-decorator报销 <a-form-item> <a-input v-decorator="[ 'username', { rules:...
antd outofdate 表单_Antd Upload 和 Antd Form 结合的踩坑记录
weixin_39887386的博客
12-19 317
今天弄了半天这个上传组件结合表单组件的问题。这个上传文件列表，如果是当前正在修改或者上传成功，当然是可以正常工作的，但是想要增加一个功能：下次打开 Modal 时，表单字段中的上传文件字段，可以默认回显文件列表(该列表是 Upload 组件内部实现的)。由于该 Upload 组件已经使用 Form 组件统一代理，所以需要通过 initialValue 字段进行初始值的设定(如果有的话)。当然也可以...
form表单校验，有数据，但是提示文字不消失
细节怪的博客
12-26 1370
自定义form表单验证，符合表单规则后，提示文字仍然不消失。
antd outofdate 表单_React+antd4.0相关问题，持续更新
weixin_42360993的博客
01-26 540
一.解决最好的问题就是form问题了，省了好多代码，但是也有很多小麻烦1.创建，这里用的是class写代码，不带喜欢函数式写；import { Form,} from "antd";export default class NameCreate extends Component {//这个地方必须要写：createFormRef自定义createFormRef = React.createRef...
antd表格与form组合使用
09-04
antd是一个非常流行的React组件库，其中包含了丰富的UI组件和工具。它提供了一个Table组件用于快速创建数据表格，也提供了Form组件用于创建表单。 在实际应用中，我们通常需要将表格与表单结合使用。一种常见的场景是，当用户点击表格中的一行数据时，需要将该数据的详细信息展示在表单中，以便用户进行编辑或其他操作。 使用antd的Table组件和Form组件结合时，我们可以根据需求进行如下操作： 1. 设置表格的选择功能：antd的Table组件支持设置行级的选择功能，可以通过设置rowSelection属性来实现，该属性可以指定选择操作的配置项，比如选择模式、默认选中的行、选择时触发的回调函数等。 2. 设置表格的行点击事件：我们可以通过设置Table组件的onRow属性来指定行点击时触发的回调函数，该函数可以接收点击的行索引作为参数，我们可以在回调函数中将该索引赋值给一个状态变量，然后在表单中根据这个状态变量获取点击行的具体数据。 3. 在表单中展示点击行的数据：使用Form组件创建表单时，可以使用getFieldDecorator方法来绑定表单项与数据源，从而实现数据的双向绑定。我们可以通过在表单项的初始值中设置获取点击行数据的方式，从而在表单中展示对应数据。 4. 表单的提交与重置：在表单中编辑完数据后，我们可以通过antd的Form组件提供的handleSubmit和handleReset方法来分别处理表单的提交和重置操作。handleSubmit方法会在表单校验通过后触发一个回调函数，我们可以在该回调函数中进行数据的提交操作。handleReset方法会重置表单的所有字段和初始值。 综上所述，antd的Table组件和Form组件可以很方便地结合使用，通过设置选择功能、行点击事件以及使用数据绑定和提交重置方法，可以实现自定义的表格与表单交互功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值