Ant Design Form Item自定义规则仅在输入与原值不同时触发

要实现编辑场景下仅当名称被修改时触发唯一性验证，核心思路是对比当前输入值与原始名称，仅在两者不同时执行验证逻辑。具体实现步骤如下：

1. 保存原始名称 #

在组件初始化时，从编辑数据源中提取并保存原始名称（比如从接口返回的编辑数据中获取）：

import { useState, useEffect } from 'react';
import { Form, Input } from 'antd';

// 假设编辑数据从props或接口获取
const EditComponent = ({ initialData }) => {
  const [originalName, setOriginalName] = useState('');
  
  useEffect(() => {
    // 初始化时保存原始名称
    if (initialData?.name) {
      setOriginalName(initialData.name);
    }
  }, [initialData]);
  
  // 唯一性验证函数，保留你原有的uniqueNameValidator逻辑
  const uniqueNameValidator = async (rule, value) => {
    // 你的唯一性检查逻辑，比如调用接口验证
    const isUnique = await checkNameUnique(value);
    if (!isUnique) {
      return Promise.reject('该名称已存在');
    }
    return Promise.resolve();
  };
  
  // 自定义规则：仅当值与原始名称不同时才触发验证
  const nameUniqueRule = () => ({
    validator: async (rule, value) => {
      // 如果当前值和原始名称一致，直接通过验证
      if (value === originalName) {
        return Promise.resolve();
      }
      // 否则执行唯一性验证
      return uniqueNameValidator(rule, value);
    },
  });
  
  return (
    <Form
      initialValues={initialData} // 表单初始化值
    >
      <Form.Item
        name="name"
        label="name"
        rules={[
          {
            required: true,
            message: "Please input the name",
          },
          nameUniqueRule, // 使用自定义规则
        ]}
      >
        <Input autoFocus data-cy="dir-create-name" />
      </Form.Item>

      <Form.Item
        name="desc"
        label="Description"
      >
        <Input.TextArea data-cy="dir-create-desc" />
      </Form.Item>
    </Form>
  );
};

2. 关键逻辑说明 #

• 原始名称存储：通过useState和useEffect保存编辑场景下的初始名称，确保后续对比的基准值正确。
• 条件验证：在自定义validator中，先判断当前输入值是否与原始名称相同。若相同，直接返回Promise.resolve()跳过唯一性检查；若不同，才执行你的uniqueNameValidator逻辑。
• 语法修正：你提供的代码中存在多余的括号（比如第一个规则里的}),、描述字段的}),），已在示例中修正。

额外提示 #

• 如果你的uniqueNameValidator是异步函数（比如调用接口），确保使用async/await或返回Promise，符合Ant Design表单验证的要求。
• 若表单初始化值是异步获取的，要确保originalName在数据加载完成后才被正确设置，避免初始值为空导致的错误验证。

内容的提问来源于stack exchange，提问作者Ian Butt