feat: form support messageVariables (#26597)

* feat: form support labelInMessage

* add doc

* change to messageVariables

* Update demo.test.js.snap

* feat: form support labelInMessage

* add doc

* change to messageVariables

* Update FormItem.tsx

* docs: add messageVariables use

components/form/FormItem.tsx

@@ -51,7 +51,7 @@ export interface FormItemProps extends FormItemLabelProps, FormItemInputProps, R
   required?: boolean;
   hidden?: boolean;
   initialValue?: any;
-
+  messageVariables?: Record<string, string>;
   /** Auto passed by List render props. User should not use this. */
   fieldKey?: React.Key | React.Key[];
 }
@@ -80,6 +80,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
     children,
     required,
     label,
+    messageVariables,
     trigger = 'onChange',
     validateTrigger,
     hidden,
@@ -259,10 +260,13 @@ function FormItem(props: FormItemProps): React.ReactElement {
     return renderLayout(children) as JSX.Element;
   }
 
-  const variables: Record<string, string> = {};
+  let variables: Record<string, string> = {};
   if (typeof label === 'string') {
     variables.label = label;
   }
+  if (messageVariables) {
+    variables = { ...variables, ...messageVariables };
+  }
 
   return (
     <Field

components/form/__tests__/index.test.js

@@ -540,6 +540,23 @@ describe('Form', () => {
     expect(wrapper.find('.ant-form-item-explain').first().text()).toEqual('Bamboo is good!');
   });
 
+  it('`messageVariables` support validate', async () => {
+    const wrapper = mount(
+      // eslint-disable-next-line no-template-curly-in-string
+      <Form validateMessages={{ required: '${label} is good!' }}>
+        <Form.Item name="test" messageVariables={{ label: 'Bamboo' }} rules={[{ required: true }]}>
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    wrapper.find('form').simulate('submit');
+    await sleep(100);
+    wrapper.update();
+    await sleep(100);
+    expect(wrapper.find('.ant-form-item-explain').first().text()).toEqual('Bamboo is good!');
+  });
+
   it('validation message should has alert role', async () => {
     // https://github.com/ant-design/ant-design/issues/25711
     const wrapper = mount(

components/form/index.en-US.md

@@ -85,6 +85,7 @@ Form field component for data bidirectional binding, validation, layout, and so
 | label | Label text | string \| ReactNode | - |  |
 | labelAlign | The text align of label | `left` \| `right` | `right` |  |
 | labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set `labelCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - |  |
+| messageVariables | default validate filed info | Record<string, string> | - | 4.7.0 |
 | name | Field name, support array | [NamePath](#NamePath) | - |  |
 | normalize | Normalize value from component value before passing to Form instance | (value, prevValue, prevValues) => any | - |  |
 | preserve | Keep field value even when field removed | boolean | true | 4.4.0 |
@@ -145,6 +146,21 @@ When `shouldUpdate` is a function, it will be called by form values update. Prov
 
 You can ref [example](#components-form-demo-control-hooks) to see detail.
 
+### messageVariables
+
+You can modify the default verification information of Form.Item through `messageVariables`.
+
+```jsx
+<Form>
+  <Form.Item messageVariables={{ another: 'good' }} label="user">
+    <Input />
+  </Form.Item>
+  <Form.Item messageVariables={{ label: 'good' }} label={<span>user</span>}>
+    <Input />
+  </Form.Item>
+</Form>
+```
+
 ## Form.List
 
 Provides array management for fields.

components/form/index.zh-CN.md

@@ -86,6 +86,7 @@ const validateMessages = {
 | label | `label` 标签的文本 | string \| ReactNode | - |  |
 | labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` |  |
 | labelCol | `label` 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - |  |
+| messageVariables | 默认验证字段的信息 | Record<string, string> | - | 4.7.0 |
 | name | 字段名，支持数组 | [NamePath](#NamePath) | - |  |
 | preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
 | normalize | 组件获取值后进行转换，再放入 Form 中 | (value, prevValue, prevValues) => any | - |  |
@@ -146,6 +147,21 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
 
 你可以参考[示例](#components-form-demo-control-hooks)查看具体使用场景。
 
+### messageVariables
+
+你可以通过 `messageVariables` 修改 Form.Item 的默认验证信息。
+
+```jsx
+<Form>
+  <Form.Item messageVariables={{ another: 'good' }} label="user">
+    <Input />
+  </Form.Item>
+  <Form.Item messageVariables={{ label: 'good' }} label={<span>user</span>}>
+    <Input />
+  </Form.Item>
+</Form>
+```
+
 ## Form.List
 
 为字段提供数组化管理。