Antd动态车牌表单如何将校验错误显示在对应输入框下方？

• 现有实现给每个动态渲染的车牌输入都挂载了带noStyle属性的Form.Item，该属性会彻底关闭表单项自带的校验状态、错误提示的原生渲染能力，所有校验产生的错误信息不会绑定到对应输入框下方，而是被全局表单统一收集。
• 加上底部独立放置的Form.ErrorList组件会拉取全局所有校验错误做集中展示，最终出现所有错误提示堆叠在底部、和对应输入框错位的问题。

1. 修正动态表单项配置 #

• 移除每个输入项上Form.Item的noStyle属性，让表单项恢复原生的错误提示渲染能力，使校验不通过的状态、错误文案自动展示在所属输入框的正下方。
• 保持每个表单项的name路径和循环渲染的索引一一对应，比如动态字段的name设置为['plateList', index, 'plateNumber']，确保校验触发时错误能精准匹配到对应输入项。
• 如果之前开启noStyle是为了去掉表单项默认的标签占位、让输入框撑满宽度，不需要依赖noStyle实现：只要把对应Form.Item的label设为null，配合调整表单的labelCol、wrapperCol配置即可，不会干扰错误提示的定位。

2. 清理底部区域逻辑 #

• 直接移除底部区域原本用来集中渲染错误的Form.ErrorList组件，避免出现错误重复展示的问题。
• 放置“添加车牌”按钮的Form.Item因为没有关联具体表单字段，需要给这个表单项加上noStyle，避免触发无意义的校验提示。
• 给添加按钮增加边界判断：当已添加的车牌字段数达到3个的上限时，自动禁用按钮，防止超出支持的最大字段数。

参考渲染逻辑片段 #

// 循环渲染动态车牌输入项
{plateFields.map((field, index) => (
  <Form.Item
    key={field.key}
    name={['plateList', index, 'plateNumber']}
    label={null}
    rules={[
      { 
        pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-Z0-9]{5,6}$/,
        message: '请输入合法格式的车牌号码'
      }
    ]}
  >
    <Input placeholder={`输入第${index + 1}个车牌`} maxLength={8} />
  </Form.Item>
))}

// 底部操作区
<Form.Item noStyle>
  <Button
    type="dashed"
    block
    icon={<PlusOutlined />}
    disabled={plateFields.length >= 3}
    onClick={handleAddField}
  >
    新增车牌
  </Button>
</Form.Item>

可选优化 #

如果需要调整输入框下方错误提示的样式（比如更紧凑的展示、自定义错误文案排版），可以通过Form组件的全局feedback配置项做定制，不需要再把错误提示抽离到全局集中渲染。

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