feat(form): add getValidateMessage api

re #2885
Tencent · Nov 4, 2024 · 05fd3e0 · 05fd3e0
1 parent 4f54dc3
commit 05fd3e0
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 211 deletions.
diff --git a/src/form/FormItem.tsx b/src/form/FormItem.tsx
@@ -45,6 +45,7 @@ export interface FormItemInstance {
   validate?: Function;
   resetField?: Function;
   setValidateMessage?: Function;
+  getValidateMessage?: Function;
   resetValidate?: Function;
   validateOnly?: Function;
   isFormList?: boolean;
@@ -382,6 +383,10 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
     setVerifyStatus(status);
   }
 
+  function getValidateMessage() {
+    return errorList;
+  }
+
   useEffect(() => {
     // 注册自定义更新回调
     if (!shouldUpdate || !form) return;
@@ -459,6 +464,7 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
     validateOnly,
     resetField,
     setValidateMessage,
+    getValidateMessage,
     resetValidate: resetHandler,
   };
   useImperativeHandle(ref, (): FormItemInstance => instance);

diff --git a/src/form/_example/base.tsx b/src/form/_example/base.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Form, Input, Radio, Checkbox, Button, Switch, MessagePlugin, DatePicker, Tooltip, Space } from 'tdesign-react';
 import type { FormProps } from 'tdesign-react';
 
@@ -17,6 +17,7 @@ export default function BaseForm() {
     if (e.validateResult === true) {
       MessagePlugin.info('提交成功');
     }
+    form.getValidateMessage?.();
   };
 
   const onReset: FormProps['onReset'] = (e) => {
@@ -32,15 +33,33 @@ export default function BaseForm() {
     ]);
   };
 
+  useEffect(() => {
+    form.getValidateMessage?.();
+  }, [form]);
+
   return (
     <Form form={form} onSubmit={onSubmit} onReset={onReset} colon labelWidth={100}>
-      <FormItem label="姓名" name="name">
+      <FormItem label="姓名" name="name" rules={[{ required: true }]}>
+        <span
+          onClick={() => {
+            console.log('debug1 111', form.getValidateMessage?.(['name']));
+          }}
+        >
+          log error 1
+        </span>
+        <span
+          onClick={() => {
+            console.log('debug1 222', form.getValidateMessage?.());
+          }}
+        >
+          log error 2
+        </span>
         <Input />
       </FormItem>
-      <FormItem label="出生日期" name="birthday">
+      <FormItem label="出生日期" name="birthday" rules={[{ required: true }]}>
         <DatePicker mode="date" />
       </FormItem>
-      <FormItem label="性别" name="gender">
+      <FormItem label="性别" name="gender" rules={[{ required: true }]}>
         <Radio.Group>
           <Radio value="male">男性</Radio>
           <Radio value="female">女性</Radio>