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

项目需求:

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

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

解决思路:

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

代码如下:

javascript 复制代码
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 (
                <Row
                  key={key}
                >
                  ......
                  <Col span={5}>
                    <Form.Item
                      {...restField}
                      name={[name, 'lastFormOption']}
                      rules={[
                        {
                          required: (fields.length - 1) == index ? false : true,
                          message: '请选择......',
                        },
                      ]}
                    >
                      <Select
                        options={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);等相关代码,将规则校验放在删除表单组的操作中。代码如下:

javascript 复制代码
<MinusCircleOutlined style={{ fontSize: 24 }} onClick={() => {
  remove(name);
  form.validateFields();
}} />
相关推荐
梁辰兴2 小时前
数据结构:排序
数据结构·算法·排序算法·c·插入排序·排序·交换排序
野犬寒鸦3 小时前
力扣hot100:搜索二维矩阵 II(常见误区与高效解法详解)(240)
java·数据结构·算法·leetcode·面试
菜鸟得菜3 小时前
leecode kadane算法 解决数组中子数组的最大和,以及环形数组连续子数组的最大和问题
数据结构·算法·leetcode
楼田莉子3 小时前
C++算法专题学习——分治
数据结构·c++·学习·算法·leetcode·排序算法
ulias2124 小时前
各种背包问题简述
数据结构·c++·算法·动态规划
JuneXcy5 小时前
结构体简介
c语言·数据结构·算法
j_xxx404_7 小时前
数据结构:栈和队列力扣算法题
c语言·数据结构·算法·leetcode·链表
南莺莺7 小时前
假设一个算术表达式中包含圆括号、方括号和花括号3种类型的括号,编写一个算法来判别,表达式中的括号是否配对,以字符“\0“作为算术表达式的结束符
c语言·数据结构·算法·
野犬寒鸦8 小时前
力扣hot100:旋转图像(48)(详细图解以及核心思路剖析)
java·数据结构·后端·算法·leetcode
一枝小雨8 小时前
【OJ】C++ vector类OJ题
数据结构·c++·算法·leetcode·oj题