Ant Design 4.x 自定义表单组件中form.validateFields()失效问题排查

这个问题其实是Ant Design 4.x表单自定义组件时的两个常见误区导致的，我来帮你拆解一下：

核心问题1：自定义组件未正确注册表单字段 #

Ant Design的Form组件是通过Form.Item的name属性来识别和管理表单字段的。你写的CustomInput组件里，Form.Item没有设置name，这就导致Form完全不知道这个字段的存在——即使Input显示正常，它也不属于表单的“可校验字段集合”。

核心问题2：默认表单提交行为打断异步校验 #

你的提交按钮设置了htmlType="submit"，这会触发浏览器默认的表单提交行为（页面刷新），而form.validateFields()是异步操作，还没等到回调执行，页面就已经刷新了，所以你看不到success/failure的日志。

修复后的完整代码 #

1. 修正自定义组件 #

让CustomInput接收字段名并传递给Form.Item，同时支持传入校验规则等Form.Item的属性：

function CustomInput({ fieldName, placeholder, ...rest }) {
  // 将fieldName作为Form.Item的name，让Form识别这个字段
  return (
    <Form.Item name={fieldName} {...rest}>
      <Input placeholder={placeholder || fieldName} />
    </Form.Item>
  )
}

2. 修正表单与提交逻辑 #

要么去掉按钮的htmlType="submit"，要么在提交函数中阻止默认行为；同时确保Form的initialValues与字段名对应：

方案A：去掉submit类型按钮

const handleFormSubmit = () => {
  form
    .validateFields()
    .then((values: any) => {
      console.log('success values => ', JSON.stringify(values));
      successCallback(values);
    })
    .catch((errorInfo: any) => {
      console.log('failureCallback values => ', JSON.stringify(errorInfo));
      failureCallback(errorInfo);
    });
};

<Form form={form} layout="vertical" name="normal_login" className="login-form" initialValues={{ Name: '' }} >
  {/* 传递fieldName，和initialValues的键对应 */}
  <CustomInput fieldName="Name" placeholder="Name" />
  <Button type="primary" onClick={handleFormSubmit}>
    Create
  </Button>
</Form>

方案B：阻止默认提交行为（保留submit按钮）

const handleFormSubmit = (e) => {
  // 阻止浏览器默认表单提交，避免页面刷新
  e.preventDefault();
  form
    .validateFields()
    .then((values: any) => {
      console.log('success values => ', JSON.stringify(values));
      successCallback(values);
    })
    .catch((errorInfo: any) => {
      console.log('failureCallback values => ', JSON.stringify(errorInfo));
      failureCallback(errorInfo);
    });
};

<Form form={form} layout="vertical" name="normal_login" className="login-form" initialValues={{ Name: '' }} >
  <CustomInput fieldName="Name" placeholder="Name" />
  <Button type="primary" htmlType="submit" onClick={handleFormSubmit}>
    Create
  </Button>
</Form>

额外说明 #

如果你的自定义组件需要更复杂的逻辑（比如自己处理值的双向绑定），可以使用Form.useForm()的form.getFieldDecorator或者直接通过form.setFieldsValue/form.getFieldValue来手动管理，但对于简单的输入组件，上面的方式已经足够解决问题。

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