Ant Design Form：如何在getFieldValue/validateFields时转换字段值？

嘿，这个需求其实用Ant Design Form自带的normalize属性就能轻松搞定，完全不用额外写复杂的逻辑～

核心思路 #

normalize是Form.Item的一个属性，它会在字段值发生变化时（包括用户输入、通过setValue设置值、初始化值）自动转换值，并且表单内部存储的就是转换后的结果。这样不管你调用getFieldValue获取单个字段，还是调用validateFields拿到所有字段值，得到的都是转换后的格式（也就是你要的邮箱数组）。

具体实现步骤 #

1. 先写好你的转换函数，把逗号分隔的邮箱字符串转成数组：

const parseEmails = (value) => {
  if (!value) return [];
  // 分割字符串、去除每个邮箱的前后空格、过滤掉空字符串
  return value.split(',').map(email => email.trim()).filter(email => email);
};

2. 在对应的Form.Item上配置normalize属性：

import { Form, Input } from 'antd';

// 假设你的表单实例是form
<Form
  form={form}
  initialValues={{ emails: "foo@example.com, bar@example.com" }}
>
  <Form.Item
    name="emails"
    label="邮箱地址"
    rules={[
      { required: true, message: '请输入至少一个邮箱地址' },
      // 校验的时候可以直接用转换后的数组做校验
      {
        validator(_, emailsArray) {
          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          const invalidEmails = emailsArray.filter(email => !emailRegex.test(email));
          if (invalidEmails.length > 0) {
            return Promise.reject(new Error(`邮箱 ${invalidEmails.join(', ')} 格式不正确`));
          }
          return Promise.resolve();
        }
      }
    ]}
    // 关键配置：设置normalize
    normalize={parseEmails}
  >
    <Input placeholder="请输入逗号分隔的邮箱地址，例如：a@example.com, b@example.com" />
  </Form.Item>
</Form>

效果验证 #

• 当用户输入"foo@example.com, bar@example.com"后，调用form.getFieldValue('emails')会直接返回["foo@example.com", "bar@example.com"]
• 调用form.validateFields().then(values => console.log(values.emails))，输出的也是转换后的数组

额外补充：编辑场景的反向转换 #

如果你的表单是编辑场景，初始值是邮箱数组（比如从后端拿到的["foo@example.com", "bar@example.com"]），需要把数组转回逗号分隔的字符串显示在Input里，这时候可以搭配getValueProps属性：

<Form.Item
  // ...其他属性不变
  normalize={parseEmails}
  getValueProps={(value) => {
    // 把数组转回逗号分隔的字符串，给Input组件显示
    return { 
      value: Array.isArray(value) ? value.join(', ') : value 
    };
  }}
>
  <Input placeholder="请输入逗号分隔的邮箱地址" />
</Form.Item>

这样初始数组会自动转成字符串显示在输入框里，用户编辑后又会被normalize转成数组存储，形成完美的闭环。

为什么不用transform？ #

你提到的校验规则里的transform，只在校验过程中临时转换值，不会改变表单内部存储的原始值，所以调用getFieldValue拿到的还是最初的字符串，这和你的需求不匹配。而normalize是直接修改表单存储的值，正好满足你获取值时就是转换后格式的要求。

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