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();
}} />
相关文章:
ant design form动态增减表单项Form.List如何进行动态校验规则
项目需求: 在使用ant design form动态增减表单项Form.List时,Form.List中有多组表单项,一组中的最后一个表单项的校验规则是动态的,该组为最后一组时,最后一个表单项是非必填项,其他时候为必填项。假设动态…...
7.16做题总结
今日也是让我看到了繁神的ACM历程,确实,我觉得繁神的历程里面确实有一句很好 不想打算法竞赛了。这是因为有别的事情要做,不是因为我打不动。 不想打比赛凌晨两点才睡了。因为我会困。 不想在群里和高水平选手水群了,因…...
unity使用 MQTT复现plant simulate仿真
unity使用 MQTT复现plant simulate仿真 一、plant simulate端配置 1、plant simulate MQTT组件配置,该组件在类库的信息流类目下,端口不变,填写ip即可; 2、设备配置界面,在控件入口和出口处各挂一个脚本,…...
MATLAB激光通信和-积消息传递算法(Python图形模型算法)模拟调制
🎯要点 🎯概率论和图论数学形式和图结构 | 🎯数学形式、图结构和代码验证贝叶斯分类器算法:🖊多类型:朴素贝叶斯,求和朴素贝叶斯、高斯朴素贝叶斯、树增强贝叶斯、贝叶斯网络增强贝叶斯和半朴素…...
初识HTML
一 HTML HTML(Hyper Text Markup Language),超⽂本标记语⾔.超文本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.标记语言:由标签构成的语⾔。 1.HTML代码是由“标签…...
基于Rspack实现大仓应用构建提效实践|得物技术
一、实践背景 随着项目的逐步迭代,代码量和依赖的逐渐增长,应用的构建速度逐步进入缓慢期。以目前所在团队的业务应用来看(使用webpack构建),应用整体构建耗时已经普遍偏高,影响日常开发测试的使用效率&am…...
什么是MOW,以bitget钱包为例
元描述:MOW凭借其富有创意的故事情节和广阔的潜力在Solana上脱颖而出。本文深入探讨了其独特的概念和光明的未来。 Mouse in a Cats World (MOW)是一个基于Solana区块链的创新meme项目,它重新构想了一个异想天开且赋予权力的故事。在这个奇幻的宇宙中&am…...
pytorch说明
深度学习中的重要概念: 激活函数: 激活函数的必要性:激活函数不是绝对必须的,但在深度学习中,它们几乎总是被使用。激活函数可以引入非线性,这使得神经网络能够学习更复杂的模式。 激活函数的位置&#x…...
AI语音机器人是否可以设计开放式问题
什么叫开放式提问? 是指提出比较概括、广泛、范围较大的问题,对回答的内容限制不严格,给对方充分自由发挥的余地。 试想一下,就算不是语音机器人,是一个真人销售,和客户沟通时提的问题是开放式的…...
ModuleNotFoundError: No module named
python脚本执行出现这个错误,检查是否安装了对应的模块,确认已经安装,执行还是出错 原因是我时在c程序中启动执行的python脚本,c程序执行是使用了sudo权限,此时会报错,而在shell中执行python(下…...
【操作系统】进程管理——用信号量机制解决问题,以生产者-消费者问题为例(个人笔记)
学习日期:2024.7.10 内容摘要:利用信号量机制解决几个经典问题模型 目录 引言 问题模型 生产者-消费者问题(经典) 多生产者-多消费者问题 吸烟者问题 读者写者问题(难点) 哲学家进餐问题࿰…...
算法刷题笔记 KMP字符串(C++实现,并给出了求next数组的独家简单理解方式)
文章目录 题目描述基本思路实现代码 题目描述 给定一个字符串S,以及一个模式串P,所有字符串中只包含大小写英文字母以及阿拉伯数字。模式串P在字符串S中多次作为子串出现。求出模式串P在字符串S中所有出现的位置的起始下标。 输入格式 第一行输入整数…...
SpringCloud架构师面试
一、微服务是什么 1、基本概念 微服务是一种架构风格(区别于单体架构、垂直架构、分布式架构、SOA架构),应用程序被划分为更小的、流程驱动的服务。 2、微服务的特征 轻量化:将复杂的系统或者服务进行纵向拆分,每个…...
C语言 | Leetcode C语言题解之第228题汇总区间
题目: 题解: char** summaryRanges(int* nums, int numsSize, int* returnSize) {char** ret malloc(sizeof(char*) * numsSize);*returnSize 0;int i 0;while (i < numsSize) {int low i;i;while (i < numsSize && nums[i] nums[i …...
入职前回顾一下git-01
git安装 Linux上安装git 在linux上建议用二进制的方式来安装git,可以使用发行版包含的基础软件包管理工具来安装。 红帽系 sudo yum install gitDebian系 sudo apt install gitWindows上安装git 去官网下载和操作系统位数相同的安装包.或者可以直接安装GitHub…...
this指向解析
先看题目: 第一题: var name window var person1 { name: person1, show1: function () { console.log(this.name) }, show2: () > console.log(th show3: function () { return function () { …...
学习小记-Nacos的服务注册与发现原理
服务注册: 当一个服务实例启动时,它会向 Nacos 服务器注册自己的信息,包括 IP 地址、端口号、元数据(如服务版本、区域信息等)。服务实例使用 Nacos API 发送注册请求,Nacos 服务器接收请求并存储服务实例信…...
视频号矩阵系统源码,实现AI自动生成文案和自动回复私信评论,支持多个短视频平台
在当今短视频蓬勃发展的时代,视频号矩阵系统源码成为了自媒体人争相探索的宝藏。这一强大的技术工具不仅能帮助我们高效管理多个短视频平台,更能通过AI智能生成文案和自动回复私信评论,为自媒体运营带来前所未有的便利与效率。 一、视频号矩…...
[Spring] SpringBoot基本配置与快速上手
🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏: 🧊 Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 🍕 Collection与…...
tomcat的优化、动静分离
tomcat的优化 tomcat自身的优化 tomcat的并发处理能力不强,大项目不适应tomcat做为转发动态的中间件(k8s集群,pytnon rubby),小项目会使用(内部使用的)动静分离 默认配置不适合生产环境&…...
idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA:通过低成本全身远程操作学习双手移动操作 传统模仿学习(Imitation Learning)缺点:聚焦与桌面操作,缺乏通用任务所需的移动性和灵活性 本论文优点:(1)在ALOHA…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
Python 实现 Web 静态服务器(HTTP 协议)
目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1)下载安装包2)配置环境变量3)安装镜像4)node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1)使用 http-server2)详解 …...
python爬虫——气象数据爬取
一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用: 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests:发送 …...
