feat: Form validateMessages support ${label} (#21835)

* update form deps * update demo * update test case
ant-design · Mar 3, 2020 · 661ff79 · 661ff79
1 parent 5d63040
commit 661ff79
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",