From 661ff7921d508c358b010956b8137c6cc0517add Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 3 Mar 2020 21:57:06 +0800
Subject: [PATCH] feat: Form `validateMessages` support `${label}` (#21835)

* update form deps

* update demo

* update test case
---
 components/form/FormItem.tsx            |  7 +++++++
 components/form/__tests__/index.test.js | 22 ++++++++++++++++++++++
 components/form/demo/nest-messages.md   |  8 ++++----
 package.json                            |  2 +-
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
index f4fd72daf610..a0fa3049a4f6 100644
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@@ -63,6 +63,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
     validateStatus,
     children,
     required,
+    label,
     trigger = 'onChange',
     validateTrigger = 'onChange',
     ...restProps
@@ -204,9 +205,15 @@ function FormItem(props: FormItemProps): React.ReactElement {
     return renderLayout(children as ChildrenNodeType);
   }
 
+  const variables: Record<string, string> = {};
+  if (typeof label === 'string') {
+    variables.label = label;
+  }
+
   return (
     <Field
       {...props}
+      messageVariables={variables}
       trigger={trigger}
       validateTrigger={validateTrigger}
       onReset={() => {
diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
index edeea85cc4d1..4f23404eece6 100644
--- a/components/form/__tests__/index.test.js
+++ b/components/form/__tests__/index.test.js
@@ -593,4 +593,26 @@ describe('Form', () => {
 
     expect(errorSpy).not.toHaveBeenCalled();
   });
+
+  it('`label` support template', async () => {
+    const wrapper = mount(
+      // eslint-disable-next-line no-template-curly-in-string
+      <Form validateMessages={{ required: '${label} is good!' }}>
+        <Form.Item name="test" label="Bamboo" rules={[{ required: true }]}>
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    wrapper.find('form').simulate('submit');
+    await delay(50);
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('.ant-form-item-explain')
+        .first()
+        .text(),
+    ).toEqual('Bamboo is good!');
+  });
 });
diff --git a/components/form/demo/nest-messages.md b/components/form/demo/nest-messages.md
index d5811614bdbc..9d00d3040c2b 100644
--- a/components/form/demo/nest-messages.md
+++ b/components/form/demo/nest-messages.md
@@ -22,13 +22,13 @@ const layout = {
 };
 
 const validateMessages = {
-  required: 'This field is required!',
+  required: '${label} is required!',
   types: {
-    email: 'Not a validate email!',
-    number: 'Not a validate number!',
+    email: '${label} is not validate email!',
+    number: '${label} is not a validate number!',
   },
   number: {
-    range: 'Must be between ${min} and ${max}',
+    range: '${label} must be between ${min} and ${max}',
   },
 };
 
diff --git a/package.json b/package.json
index a7446e62b688..8ef08c05f72d 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "rc-dialog": "~7.6.0",
     "rc-drawer": "~3.1.1",
     "rc-dropdown": "~3.0.0",
-    "rc-field-form": "~1.0.0",
+    "rc-field-form": "~1.1.0",
     "rc-input-number": "~4.5.4",
     "rc-mentions": "~1.0.0",
     "rc-menu": "~8.0.1",