Ant Design模态框内如何触发表单字段校验？

阿华AIGC实验室

2026-4-23

兄弟我太懂你下班前卡bug的崩溃感了！先别觉得自己代码是垃圾，咱们来一步步捋清楚问题出在哪~

首先看你的核心问题：按钮放在模态框footer里，点击保存时表单校验没正常触发——Input只有聚焦时才校验，Select完全没反应。这其实是两个小问题叠加导致的：

问题1：提交+关模态框的顺序错了，打断了校验流程

你现在的保存按钮逻辑是：form.submit()之后立刻setColumnDetailsModalOpen(false)，但AntD的表单校验是异步的，你还没等校验完成就把模态框关了，自然看不到校验提示，尤其是Select这种没被交互过的字段，默认不会自动触发校验。

解决办法：先手动触发全字段校验，通过后再提交+关模态框
把保存按钮的点击逻辑改成异步的，用form.validateFields()手动触发所有字段的校验，这个方法会返回Promise，校验通过后再执行提交和关闭操作：

<Button
  key='saveColumn'
  type='primary'
  onClick={async () => {
    try {
      // 先触发所有字段的校验，失败会进入catch
      await form.validateFields();
      // 校验通过再提交表单
      await form.submit();
      // 提交成功后再关闭模态框
      setColumnDetailsModalOpen(false);
    } catch (errorInfo) {
      // 校验失败时，AntD会自动显示错误提示，这里可以加个日志或者额外提示
      console.log('表单校验未通过:', errorInfo);
    }
  }}
  htmlType={'submit'}
>
  {JsonImports.reports.subPages.preliminaryLimits.addColumn.detailsModal.buttons.save}
</Button>

问题2：Select的状态没有和Form正确绑定

你给Select设置了value={columnTypeValue}和onSelect={handleTypeSelect}，相当于手动控制了Select的值，但Form的字段状态没有同步更新，导致Form无法追踪这个字段的变化，自然不会触发校验。

解决办法：让Form接管字段值的管理
去掉Select的value属性，用Form的name来自动绑定值；如果需要在选择后做额外逻辑，用onChange代替onSelect，并且通过form.setFieldsValue同步值（或者直接在onChange里处理逻辑，Form会自动更新字段状态）：

<Form.Item
  label={JsonImports.reports.subPages.preliminaryLimits.addColumn.detailsModal.form.columnType.label}
  name={'columnType'}
  rules={[
    {
      required: true,
      message: JsonImports.reports.subPages.preliminaryLimits.addColumn.detailsModal.form.columnType.missingInput
    }
  ]}
  validateFirst={true}
>
  <Select
    placeholder={JsonImports.reports.subPages.preliminaryLimits.addColumn.detailsModal.form.columnType.placeholder}
    options={columnTypes.map(type => ({label: type.title, value: type.key}))}
    onChange={(value) => {
      // 这里写你原本在handleTypeSelect里的逻辑
      // 比如做一些联动操作，不需要手动设置value，Form会自动同步
      handleTypeSelect(value);
    }}
    ref={columnTypeRef}
  />
</Select>
</Form.Item>

如果之前你是手动维护columnTypeValue的，现在可以把这个状态删掉，直接通过form.getFieldValue('columnType')来获取字段值，这样Form的状态和组件UI就能完全同步了。