ant design form动态增减表单项Form.List如何进行动态校验规则

        项目需求:

        在使用ant design form动态增减表单项Form.List时,Form.List中有多组表单项,一组中的最后一个表单项的校验规则是动态的,该组为最后一组时,最后一个表单项是非必填项,其他时候为必填项。假设动态增加了两组表单项,均为填写内容,在必填项校验被触发后,删除了第二组表单项,此时仅剩一组表单项,想要最后一个表单项的校验状态不再显示必填项提示。如下图所示:

想要的效果,最后一个表单项不显示必填项提示:       

        解决思路:

        使用动态校验规则,获取到最后一组的索引,使用form.validateFields重新触发校验规则。

        代码如下:

import React, { useState } from 'react';
import { Form } from 'antd';const App = () => {const [lastIndex, setLastIndex] = useState(false); // form表单最后一组数据的索引const [form] = Form.useForm();useEffect(() => {// 减少表单项时,重新触发表单验证,使form最后一组中最后一个表单项的验证状态不再显示必填项提示form.validateFields([['configs', lastIndex, 'lastFormOption']]);}, [lastIndex, form]);return (<Form form={form} initialValues={{ configs: [{}] }} >……<Form.List name="configs">{(fields, { add, remove }) => (<>{fields.map(({ key, name, ...restField }, index) => {// 这里获取最后一组表单项索引setLastIndex(fields.length - 1);return (<Rowkey={key}>……<Col span={5}><Form.Item{...restField}name={[name, 'lastFormOption']}rules={[{required: (fields.length - 1) == index ? false : true,message: '请选择……',},]}><Selectoptions={options}disabled={(fields.length - 1) == index}placeholder="最后一条自定义条件为非必填项"/></Form.Item></Col><Col span={2}><MinusCircleOutlined onClick={() => remove(name)} /></Col></Row>)})}<Form.Item ><Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>新增</Button></Form.Item></>)}</Form.List></Form>);
};
export default App;

        上述解决方式中,如果App作为一个子组件用到了ForwardRef,会出现下面的告警:

        Warning: Cannot update a component (`ForwardRef(AddRemoveFormItems)`) while rendering a different component (`Field`). To locate the bad setState() call inside `Field`, follow the stack trace as described……

        解决方案:去掉setLastIndex(fields.length - 1);等相关代码,将规则校验放在删除表单组的操作中。代码如下:

<MinusCircleOutlined style={{ fontSize: 24 }} onClick={() => {remove(name);form.validateFields();
}} />

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/871114.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣题解(最长等差数列)

1027. 最长等差数列 给你一个整数数组 nums&#xff0c;返回 nums 中最长等差子序列的长度。 回想一下&#xff0c;nums 的子序列是一个列表 nums[i1], nums[i2], ..., nums[ik] &#xff0c;且 0 < i1 < i2 < ... < ik < nums.length - 1。并且如果 seq[i1] -…

docker inspect 如何提取容器的ip和端口 网络信息?

目录 通过原生Linux命令过滤找到IP 通过jq工具找到IP 使用docker -f 的过滤&#xff08;模板&#xff09; 查找端口映射信息 查看容器内部细节 docker inspect 容器ID或容器名 通过原生Linux命令过滤找到IP 通过jq工具找到IP jq 是一个轻量级且灵活的命令行工具&#xf…

(视频演示)基于OpenCV的实时视频跟踪火焰识别软件V1.0源码及exe下载

本文介绍了基于OpenCV的实时视频跟踪火焰识别软件&#xff0c;该软件通过先进的图像处理技术实现对实时视频中火焰的检测与跟踪&#xff0c;同时支持导入图片进行火焰识别。主要功能包括相机选择、实时跟踪和图片模式。软件适用于多种场合&#xff0c;用于保障人民生命财产安全…

OpenGL笔记二之glad加载opengl函数以及opengl-API(函数)初体验

OpenGL笔记二之glad加载opengl函数以及opengl-API(函数)初体验 总结自bilibili赵新政老师的教程 code review! 文章目录 OpenGL笔记二之glad加载opengl函数以及opengl-API(函数)初体验1.运行2.重点3.目录结构4.main.cpp5.CMakeList.txt 1.运行 2.重点 3.目录结构 01_GLFW_WI…

力扣 150题 逆波兰表达式求值 记录

题目描述 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。请你计算该表达式。返回一个表示表达式值的整数。注意&#xff1a;有效的算符为 、-、* 和 / 。 每个操作数&#xff08;运算对象&#xff09;都可以是一个整数或者另一个表达式…

Python-PLAXIS自动化建模技术与典型岩土工程

有限单元法在岩土工程问题中应用非常广泛&#xff0c;很多软件都采用有限单元解法。在使用各大软件进行数值模拟建模的过程中&#xff0c;您是否发现GUI界面中重复性的点击输入工作太繁琐&#xff1f;从而拖慢了设计或方案必选进程&#xff1f; 搭建自己的Plaxis模型&#xff…

【ceph】ceph-mon重新选举的情况

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…

Oracle数据文件扩容

1、增加数据文件扩容 ALTER TABLESPACE app_data ADD DATAFILE D:\ORACLE\PRODUCT\10.2.0\ORADATA\EDWTEST\APP04.DBF SIZE 30G AUTOEXTEND ON NEXT 1G MAXSIZE UNLIMITED; ALTER database datafile /ora/oradata/radius/undo.dbf resize 32G; alter tablespace sysaux add …

设计模式的七大原则

1.单一职责原则 单一职责原则(Single responsibility principle)&#xff0c;即一个类应该只负责一项职责。如类A负责两个不同职责&#xff1a;职责1&#xff0c;职责2。当职责1需求变更而改变A时&#xff0c;可能造成职责2执行错误&#xff0c;所以需要将类A的粒度分解为A1、…

java设计模式之:策略模式+工厂模式整合案例实战(一)

本文介绍项目中常用的策略模式工厂模式的案例&#xff0c;该案例是针对策略类比较少的情况&#xff1b;下一篇会讲解策略类比较多的案例&#xff0c;下面直接开始&#xff1a; 案例1&#xff1a;项目中对系统中的客户和销售进行事件通知(短信、邮件、钉钉) 首先要有通知的策略…

docker部署neo4j

前言&#xff1a; 因为现在docker拉取neo4j镜像超时&#xff0c;所以从其他大佬搭建的仓库拉下来镜像文件。 此文档为部署neo4j-3.4.0版本 1、拉取镜像 参考另一篇博文&#xff0c;docker拉取镜像失败解决。 docker拉取镜像超时解决-CSDN博客 2、创建目录 mkdir -p /roo…

安卓14中Zygote初始化流程及源码分析

文章目录 日志抓取结合日志与源码分析systemServer zygote创建时序图一般应用 zygote 创建时序图向 zygote socket 发送数据时序图 本文首发地址 https://h89.cn/archives/298.html 最新更新地址 https://gitee.com/chenjim/chenjimblog 本文主要结合日志和代码看安卓 14 中 Zy…

Redis服务器统计和配置信息简介

Redis服务器统计和配置信息简介 首先使用INFO命令在Redis中用于获取Redis服务器的各种统计和配置信息;执行上述命令后&#xff0c;返回的信息分为多个部分&#xff0c;包括服务器信息、客户端信息、内存信息、持久化信息、统计信息、复制信息、CPU信息和键空间信息&#xff1b;…

C/C++ 进阶(7)模拟实现map/set

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;C 一、简介 map和set都是关联性容器&#xff0c;底层都是用红黑树写的。 特点&#xff1a;存的Key值都是唯一的&#xff0c;不重复。 map存的是键值对&#xff08;Key—Value&#xff09;。 set存的是键…

Git的命令使用与IDEA内置git图形化的使用

Git 简介 Git 是分布式版本控制系统&#xff0c;它可以帮助开发人员跟踪和管理代码的更改。Git 可以记录代码的历史记录&#xff0c;并允许您在不同版本之间切换。 通过历史记录可以查看&#xff1a; 进行了哪些更改&#xff1f;谁进行了更改&#xff1f;何时进行了更改&#…

网络安全高级工具软件100套

1、 Nessus&#xff1a;最好的UNIX漏洞扫描工具 Nessus 是最好的免费网络漏洞扫描器&#xff0c;它可以运行于几乎所有的UNIX平台之上。它不止永久升级&#xff0c;还免费提供多达11000种插件&#xff08;但需要注册并接受EULA-acceptance–终端用户授权协议&#xff09;。 它…

在生产环境中部署Elasticsearch:最佳实践和故障排除技巧——聚合与搜索(三)

#在生产环境中部署Elasticsearch&#xff1a;最佳实践和故障排除技巧——聚合与搜索&#xff08;三&#xff09; 前言 文章目录 前言- 聚合和分析- 执行聚合操作- 1. 使用Java API执行聚合操作- 2. 使用CURL命令执行聚合操作- 1. 使用Java API执行度量操作- 2. 使用CURL命令执…

谷粒商城实战笔记-34-前端基础-ES6-promise异步编排

文章目录 一&#xff0c;回调地狱&#xff08;Callback Hell&#xff09;二&#xff0c;实战Promise1&#xff0c;场景说明2&#xff0c;回调地狱-传统实现3&#xff0c;使用Promise重构3.1 用Promise实现上述需求3.2 进一步重构 在ES6中&#xff0c;Promise是一个用于异步编程…

网络安全-内网安全加固方案

内网接入限制(MAC地址白名单) 只允许信任设备接入内网&#xff0c;且每次自动获取的IP地址不变(后续就可根据IP地址控制访问权限) 开启DHCP服务根据MAC地址静态分配固定IP地址 只允许可信的DHCP服务器分配IP地址(防止私建DHCP服务器) DHCP Snooping 信…

在Vue中,子组件向父组件传递数据

在Vue中&#xff0c;子组件向父组件传递数据通常通过两种方式实现&#xff1a;事件和回调函数。这两种方式允许子组件与其父组件进行通信&#xff0c;传递数据或触发特定的行为。 1. 通过事件传递数据 子组件可以通过触发自定义事件&#xff0c;并将数据作为事件的参数来向父组…