AntD Form组件复杂的动态增减表单项，默认展示一个进行占位

最新推荐文章于 2024-06-27 11:28:27 发布
最新推荐文章于 2024-06-27 11:28:27 发布
阅读量1.9k 收藏 3
点赞数 2
分类专栏： react antd web前端 文章标签： antd form react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40593656/article/details/112530608
版权
web前端 同时被 3 个专栏收录
61 篇文章 1 订阅
订阅专栏
react
43 篇文章 1 订阅
订阅专栏
antd
18 篇文章 0 订阅
订阅专栏

需求：表格有可添加删除项，但是默认要至少填一组
使用的组件：antd 的 form 有对应的demo
在这里插入图片描述在这里插入图片描述
但是demo里面是默认一组都不显示，之前没时间研究，
所以直接在初始值那里，默认第一组的赋值为每个参数为" "
这样的问题：
1.在提交的时候 默认是有值的 直接把" "提交上去了
2.当动态删减的表单项比较多的时候，这样处理并不太合理
解决方案：
在这里插入图片描述
直接在这个参数里放{}占位符即可，需要默认展示几个就放几个

实测好用

cvory
关注
专栏目录
ant design Form 组件总结 快速构建复杂Ant Design Form表单
cuandeqin2083的博客
07-28 2343
Ant Design Form Antd 表单的核心无非是以下两点 表单创建（Form.create）在this.props写入form属性 表单与组件的双向绑定（this.props.form.getFieldDecorator） 表单的取值（this.props.form.validateFields / this.props.form.validateFieldsAndScroll） 表...
【每天学一点-08】Antd 动态增减表单项，默认展示一项
weixin_43906233的博客
10-31 332
Antd动态增减表单项，默认展示一项，在表单当中动态添加手机号，最后提交包含手机号的数组
ant.d中动态增减表单项
weixin_43443341的博客
04-14 1666
ant.d中动态增减表单项介绍实现 介绍 项目中经常会用到动态增减表单的需求，虽然ant.design官网也有相关的demo代码演示，但在实际的应用项目中需要动态增减的表单远远比demo复杂多了，具体如何实现呢？先来看看我们实现后的具体效果是什么样的吧： 实现 初始化时默认有一条 一条时不允许删除 可以设置key 校验不能重复 import React, { Component, Fragm...
antd form 动态增减表单项
最新发布
m0_57253767的博客
06-27 429
如图所示，有默认的，点击添加的时候可以出新的表单，并且给后边跟上删除符号，当表单只剩下一层时候删除符号不展示。，可以进去自己看api和使用方法），并且进入modal的时候需要有默认初始的表单。需求：新增的modal，需要动态增加表单内容（
form动态增减表单默认出现一条数据项
weixin_46015250的博客
10-17 431
form动态增减表单默认出现一条数据项
ANT Form 骚操作之动态增减
JeffanChen的博客
12-16 1259
ANT Form复杂动态增减表单项 这里直接借用官网的例子讲解一下 import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Form, Input, Button, Space, Select } from 'antd'; import { MinusCircleOutlined, PlusOutlined } from '
JavaScript动态增减表单项
01-13
1. **创建新元素**：使用`document.createElement()`创建一个新的表单项元素，例如一个文本输入框。 2. **设置属性**：可以使用`.setAttribute()`方法设置新元素的属性，如`id`、`name`、`value`等。 3. **插入到DOM...
在react项目中使用antd的form组件,动态设置input框的值
01-18
问题： ... 原因： ...不使用initialValue设置动态更新的值，而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值，就可以解决了。 if (result.code===0) { if (result.data) { this.
antd 的form 表单怎么回显数据_antd design Form动态增减表单项（多个）,组装数据及编辑回显，选择初始值，控制添加减少表单项数量等...
weixin_30047059的博客
12-30 1527
新增效果图如下编辑效果图如下 代码如下const {salesFollow: { info },form: { getFieldDecorator, getFieldValue },} = this.props;const formItemLayout = {labelCol: { span: 4 },wrapperCol: { span: 12 },};getFieldDecorator('ke...
antd Form组件方法getFieldsValue获取自定义组件的值操作
01-18
onChange方法, 子组件调用此方法，可将值传给父组件，从而Form可拿到自定义组件的值 value属性，获得初始值 2、组件调用 像Form表单内的组件一样调用，就可以了 补充知识：Ant Design Pro，用setFieldsValue方法，...
【避坑指“难”】Antd Form动态表单删减，默认显示第一行
椰卤工程师的个人博客
02-17 1121
默认是通过Button按钮实现From.item的添加。 如果我们默认至少输入一条数据，即默认显示第一行输入框，可以这么配置： <Form.List initialValue={[{}]}> </Form.List>
使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（二）
smk108的博客
11-26 6367
注：该篇为上一篇《使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（一）》的 解释及使用说明。 地址：https://blog.csdn.net/smk108/article/details/84554186 该组件实现了从初始状态添加、有初始值的编辑、并一直支持动态增减表单项的功能，组件解释如下： render时有没有初始值之keys的赋值： const {g...
使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（一）
热门推荐
smk108的博客
11-26 1万+
在使用antd form做动态表单开发时，官网有如下示例： 当添加表单项后： 使用此示例可以实现动态增加、减少表单项的功能，但是当我们编辑以前添加过的form表单时，该如何赋初值，又如何支持新增和编辑使用同一组件，即可以支持没有初值和有初值两种情况。本文分享了一种解决该问题的组件封装方式。 组件使用方式： <TagComponent tag={tag} label='tag...
ant-design-vue form表单实现动态增减表单项
weixin_41258179的博客
12-10 4043
在项目中遇到了需要对表单的最后两项进行动态增减 ，我这里实现以后做个记录。 <a-form-model ref="ruleForm" :model="form" :rules="rules" > //不需要增减的表单项 //设置display:flex属性 可让表单显示在一行 <div style="display:flex"> // prop 表单域的model字段 <a-form-model-item label=
Antd中Form组件动态增减嵌套字段默认展示字段
九月萩的博客
09-29 2090
Antd在“动态增减嵌套字段”模块，默认展示输入字段。
React Hooks + TypeScript + Ant Design -------------表单动态增减实现
qq_48718857的博客
08-12 593
官方地址：https://ant.design/components/form-cn/#components-form-demo-dynamic-form-item 基础Demo import { Form, Input, Button, Space } from 'antd'; import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; const Demo = () => { const onFinish .
ant design pro 动态表单 表单嵌套 表单的数据存储到上层组件(可手动增减表单)
你好！刘斩仙
04-26 4835
描述： 如下图，最终形式 testQuestionOptionList:[ { quesOption: '1', flag: 'A'}, { quesOption: '2', flag: 'B'} ] 参考：根据 ant design 官网案例 表单的数据存储到上层组件 有疑问请参考官网 import React, { PureComponent, Fragment } from 'r...
使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（三）
smk108的博客
09-30 2719
以前我写过《使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式》，介绍了一种使用antd form开发支持动态增减表单项的实现方式，为了方便维护和调试，最近抽时间写了一个简单的demo放在了github上，地址为：https://github.com/smk108/dynamic-form-item。 ...
vue2+elementUi+form动态增减表单项（新增和编辑）
m0_61361486的博客
03-11 1413
【代码】vue2+elementUi+form动态增减表单项（新增和编辑）
antd动态增减表单项设置表单回显
07-16
### 回答1： 在ant Design中，我们可以使用Form...总结：通过设置表单项初始值、使用`Form.List`组件实现动态增减表单项、表单项的读写绑定以及antd的自动回显功能，可以实现antd动态增减表单项并设置表单回显的需求。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值