antd4 Form.List动态增减表单项，默认展示一项

本文深度解析Ant Design的Form.List组件，重点讲解如何高效处理动态表单与表格嵌套的复杂场景。通过核心概念拆解、实战进阶案例及数据回填与校验技巧，帮助开发者掌握从静态编码到动态生成的转变，利用Form.List简化状态管理，提升开发效率。

@TOC业务场景： react-antd-form表单项自定义增加 前几天有一个需求，很是头疼，需要用户自行追加Form Item项，起初还以为很简单，做到后面越做越复杂。 上面是初始页面， 当我们点击+ 就会新增新的Item项，做法很简单，使用push向数组追加即可， 这时候第一个坑来了， 渲染的时候， 每一个Item项都需要一个唯一的name名称来确保收集的参数是唯一的，不会重复，所以我用了index来确保每一项都是不重复的， 但是这么做回到是后端接受的参数很难去调用，好在这个还能解决 6

本文深入解析Antd Form.List组件在动态表单开发中的核心难点，重点解决表单校验失效与动态增减项导致的数据错乱等常见问题。通过剖析数据流与渲染机制，提供跨字段校验、动态规则设置及性能优化的实战解决方案，帮助开发者高效构建稳定可靠的中后台表单。

在使用antd form做动态表单开发时，官网有如下示例： 当添加表单项后： 使用此示例可以实现动态增加、减少表单项的功能，但是当我们编辑以前添加过的form表单时，该如何赋初值，又如何支持新增和编辑使用同一组件，即可以支持没有初值和有初值两种情况。本文分享了一种解决该问题的组件封装方式。 组件使用方式： <TagComponent tag={tag} label='tag...

添加和编辑用同一个Form.list表单默认值问题，来回切换并且改变此表单的默认展示几项

目前只配置了输入框和文本框，需要的可自定义添加type 实现效果如图 const initValues = [ {type:'input',name:'start',label:'最小值',initValue:'',}, {type:'input',name:'end',label:'最大值',initValue:'',}, {type:'text',name:'unit',label:'采购单位',initValue:'盒',rules:[]}, {type:'input',name

有一种迷茫叫一脸懵逼，当明白真相时恍然大悟。 在ant design的官网中有一个demo叫动态增减表单项，非常方便的使用在动态增加选项的功能，但是并没有提供设置默认值，而且在所有使用Form.List的demo中，也都没有。!_! 一脸懵逼的表示，怎么展现默认值啊。官网的DEMOdemo的样例代码为<Form name="dynamic_form_nest_item" onFinish={...

我们说一下时间段交叉校验，validatorr: async (rule, value) =>{} 用于自定义校验规则，然后使用Promise去返回校验响应。rule中包含着当前字段field,其中包含着当前字段(时间选择器)的索引值，value是我们当前时间选择器中选中的时间。如下当检验函数返回true 我们会进行提示每个”购买时间段之间不可时间交叉“(这里用到Promise.reject)。中的所以时间段比较(但是不要和其自身比较)，所以收集一下当前选中的时间选择器的索引值。

Antd动态增减表单项，默认展示一项，在表单当中动态添加手机号，最后提交包含手机号的数组

新增效果图如下编辑效果图如下 代码如下const {salesFollow: { info },form: { getFieldDecorator, getFieldValue },} = this.props;const formItemLayout = {labelCol: { span: 4 },wrapperCol: { span: 12 },};getFieldDecorator('ke...

在 React 应用开发中，Ant Design 的 Form 组件是一个非常强大的工具，特别适用于处理复杂的表单逻辑。本文将深入探讨如何在 Ant Design 的 Form 组件中实现动态增减嵌套字段的功能，并处理字段之间的动态依赖关系。通过 Ant Design 的Form.List组件和 React 的状态管理，我们可以轻松实现动态增减嵌套字段的功能，并处理字段之间的动态依赖关系。这种模式非常适合处理复杂的表单逻辑，能够有效提升用户体验。

在使用ant design form动态增减表单项Form.List时，Form.List中有多组表单项，一组中的最后一个表单项的校验规则是动态的，该组为最后一组时，最后一个表单项是非必填项，其他时候为必填项。假设动态增加了两组表单项，均为填写内容，在必填项校验被触发后，删除了第二组表单项，此时仅剩一组表单项，想要最后一个表单项的校验状态不再显示必填项提示。等相关代码，将规则校验放在删除表单组的操作中。使用动态校验规则，获取到最后一组的索引，使用form.validateFields重新触发校验规则。

Form是高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。

如图所示，有默认的，点击添加的时候可以出新的表单，并且给后边跟上删除符号，当表单只剩下一层时候删除符号不展示。，可以进去自己看api和使用方法），并且进入modal的时候需要有默认初始的表单。需求：新增的modal，需要动态增加表单内容（

这个代码示例展示了如何使用Ant Design的Form和Form.List组件来创建一个可动态增减表单项的表单，并且每个表单项旁边都有一个Switch组件，这些Switch组件是受控的，即它们的状态会被保存在组件的状态中。当用户提交表单时，表单的数据以及Switch的状态都会被打印出来。

使用initialValues设置初始值，可直接设置为：initialValues={{users: [{}]}}。在Ant Design（antd）中，你可以使用。组件来动态增减表单项。

有一种迷茫叫一脸懵逼，当明白真相时恍然大悟。 在ant design的官网中有一个demo叫动态增减表单项，非常方便的使用在动态增加选项的功能，但是并没有提供设置默认值，而且在所有使用Form.List的demo中，也都没有。!_! 一脸懵逼的表示，怎么展现默认值啊。官网的DEMOdemo的样例代码为<Form name="dynamic_form_nest_item" onFinish={...

使用React + antd实现符合嵌套增减表单