Antd Form.Item校验器通过侧边按钮改输入值时不触发的问题

问题描述 #

输入框配置了最小值/最大值校验规则，表单外设有按钮可将输入值设为最大值。手动输入小于最小值的内容时，错误提示正常显示；但点击按钮设置合法最大值后，错误提示未消失。经排查，外部按钮修改值时Antd Form.Item的校验器未触发，需实现无论值是用户手动输入还是外部修改，都自动触发校验。

解决方案 #

方法1：使用Antd Form的setFieldsValue修改值（推荐） #

Antd Form的setFieldsValue方法会主动通知Form字段值变化，自动触发对应字段校验，无需手动调用校验方法。

修改步骤：

1. 通过useForm获取Form实例：

import { Form, Input } from 'antd';

const [form] = Form.useForm();

2. 修改按钮点击事件，用form.setFieldsValue替换原有状态修改：

<div className={`${styles.creditPointTable} d-flex`}>
  <span
    id={styles.payAllTotal}
    onClick={() => {
      const maxVal = +credit.earlyPayment;
      // 用Form方法设置值，自动触发校验
      form.setFieldsValue({ paymentSum: maxVal });
    }}
  >
    pay max {formatCurrencyHelper(credit?.earlyPayment)}
  </span>
</div>

3. 优化Form.Item配置，改用Form的getFieldProps管理输入框：

<Form.Item
  name="paymentSum"
  // 移除错误的valuePropName="option"，Input默认用value传递值
  rules={[
    {
      validator: (_, value) => {
        const numValue = Number(value);
        // 先校验是否为有效数字
        if (isNaN(numValue)) {
          return Promise.reject('请输入正确的金额');
        }
        // 校验最小值
        if (numValue < minPaymentValue) {
          return Promise.reject(`最小值是 ${minPaymentValue}₽`);
        }
        // 校验最大值
        if (numValue > maxPaymentValue) {
          return Promise.reject(`最大值是 ${maxPaymentValue}₽`);
        }
        return Promise.resolve();
      },
    },
  ]}
>
  <Input
    className={styles.formControl}
    id="credit-amountPayment"
    maxLength={7}
    type="number"
    // 用Form的getFieldProps绑定字段，自动处理value和onChange
    {...form.getFieldProps('paymentSum', {
      onChange: (e) => {
        // 保留原有handlePaymentSum逻辑的话，在此调用
        handlePaymentSum(e);
      },
    })}
  />
</Form.Item>

方法2：手动触发校验（兼容原有状态管理） #

如果继续使用自定义状态管理（比如paymentSum.setValue），可在设置值后手动调用Form的validateField触发校验：

// 按钮点击事件
onClick={() => {
  const maxVal = +credit.earlyPayment;
  paymentSum.setValue(maxVal);
  // 手动触发paymentSum字段的校验
  form.validateField('paymentSum');
}}

关键注意点 #

• 避免同时使用Form字段管理和自定义状态绑定（比如同时写value={paymentSum.value}和{...form.getFieldProps}），会导致值不同步。
• 校验器不要依赖外部状态（如原代码中的paymentSum.value），直接使用校验函数传入的value参数，确保校验的是字段真实值。

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