feat(form): setFields 支持 validateMessage 参数 (#1226)

Tencent · Aug 4, 2022 · 021068d · 021068d
1 parent 65c21e6
commit 021068d
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 37 deletions.
diff --git a/src/form/FormItem.tsx b/src/form/FormItem.tsx
@@ -77,7 +77,7 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((props, ref) => {
     requiredMark = requiredMarkFromContext,
   } = props;
 
-  const [freeShowErrorMessage, setFreeShowErrorMessage] = useState(false);
+  const [freeShowErrorMessage, setFreeShowErrorMessage] = useState(undefined);
   const [errorList, setErrorList] = useState([]);
   const [successList, setSuccessList] = useState([]);
   const [verifyStatus, setVerifyStatus] = useState(ValidateStatus.TO_BE_VALIDATED);
@@ -287,11 +287,11 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((props, ref) => {
     setVerifyStatus(ValidateStatus.TO_BE_VALIDATED);
   }
 
-  function setField(field: { value?: string; status?: ValidateStatus }) {
-    const { value, status } = field;
+  function setField(field: { value?: string; status?: ValidateStatus; validateMessage?: FormItemValidateMessage }) {
+    const { value, status, validateMessage } = field;
     if (typeof status !== 'undefined') {
-      setErrorList([]);
-      setSuccessList([]);
+      setErrorList(validateMessage ? [validateMessage] : []);
+      setSuccessList(validateMessage ? [validateMessage] : []);
       setNeedResetField(false);
       setVerifyStatus(status);
     }

diff --git a/src/form/__tests__/__snapshots__/form.test.tsx.snap b/src/form/__tests__/__snapshots__/form.test.tsx.snap
@@ -500,27 +500,53 @@ exports[`base.jsx 1`] = `
         <div
           class="t-form__controls-content"
         >
-          <button
-            class="t-button t-button--theme-primary t-button--variant-base"
-            type="submit"
+          <div
+            class="t-space t-space-horizontal"
+            style="gap: 16px;"
           >
-            <span
-              class="t-button__text"
+            <div
+              class="t-space-item"
             >
-              提交
-            </span>
-          </button>
-          <button
-            class="t-button t-button--theme-primary t-button--variant-base"
-            style="margin-left: 12px;"
-            type="reset"
-          >
-            <span
-              class="t-button__text"
+              <button
+                class="t-button t-button--theme-primary t-button--variant-base"
+                type="submit"
+              >
+                <span
+                  class="t-button__text"
+                >
+                  提交
+                </span>
+              </button>
+            </div>
+            <div
+              class="t-space-item"
             >
-              重置
-            </span>
-          </button>
+              <button
+                class="t-button t-button--theme-primary t-button--variant-base"
+                type="button"
+              >
+                <span
+                  class="t-button__text"
+                >
+                  设置信息
+                </span>
+              </button>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <button
+                class="t-button t-button--theme-default t-button--variant-base"
+                type="reset"
+              >
+                <span
+                  class="t-button__text"
+                >
+                  重置
+                </span>
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -4534,7 +4560,7 @@ exports[`validate-message.jsx 1`] = `
     class="t-form"
   >
     <div
-      class="t-form__item t-form-item__account t-form__item-with-help"
+      class="t-form__item t-form-item__account t-form__item-with-help t-form__item-with-extra"
     >
       <div
         class="t-form__label t-form__label--required t-form__label--right"
@@ -4545,7 +4571,7 @@ exports[`validate-message.jsx 1`] = `
         </label>
       </div>
       <div
-        class="t-form__controls"
+        class="t-form__controls t-is-error"
         style="margin-left: 100px;"
       >
         <div
@@ -4572,10 +4598,16 @@ exports[`validate-message.jsx 1`] = `
         >
           这是用户名字段帮助说明
         </div>
+        <div
+          class="t-input__extra"
+          title="自定义用户名校验信息提示"
+        >
+          自定义用户名校验信息提示
+        </div>
       </div>
     </div>
     <div
-      class="t-form__item t-form-item__description t-form__item-with-help"
+      class="t-form__item t-form-item__description t-form__item-with-help t-form__item-with-extra"
     >
       <div
         class="t-form__label t-form__label--right"
@@ -4586,7 +4618,7 @@ exports[`validate-message.jsx 1`] = `
         </label>
       </div>
       <div
-        class="t-form__controls"
+        class="t-form__controls t-is-warning"
         style="margin-left: 100px;"
       >
         <div
@@ -4613,6 +4645,12 @@ exports[`validate-message.jsx 1`] = `
         >
           一句话介绍自己
         </div>
+        <div
+          class="t-input__extra"
+          title="自定义个人简介校验信息提示"
+        >
+          自定义个人简介校验信息提示
+        </div>
       </div>
     </div>
     <div

diff --git a/src/form/_example/base.jsx b/src/form/_example/base.jsx
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { Form, Input, Radio, Checkbox, Button, Switch, MessagePlugin, DatePicker, Tooltip } from 'tdesign-react';
+import { Form, Input, Radio, Checkbox, Button, Switch, MessagePlugin, DatePicker, Tooltip, Space } from 'tdesign-react';
 
 const { FormItem } = Form;
 
@@ -18,6 +18,13 @@ export default function BaseForm() {
     MessagePlugin.info('重置成功');
   };
 
+  const setMessage = () => {
+    formRef.current.setFields([
+      { name: 'name', status: 'fail', validateMessage: { type: 'error', message: '输入有误' } },
+      { name: 'birthday', status: 'waning', validateMessage: { type: 'warning', message: '时间有误' } },
+    ]);
+  };
+
   return (
     <Form ref={formRef} onSubmit={onSubmit} onReset={onReset} colon labelWidth={100}>
       <FormItem label="姓名" name="name">
@@ -53,12 +60,15 @@ export default function BaseForm() {
         </div>
       </FormItem>
       <FormItem style={{ marginLeft: 100 }}>
-        <Button type="submit" theme="primary">
-          提交
-        </Button>
-        <Button type="reset" style={{ marginLeft: 12 }}>
-          重置
-        </Button>
+        <Space>
+          <Button type="submit" theme="primary">
+            提交
+          </Button>
+          <Button onClick={setMessage}>设置信息</Button>
+          <Button type="reset" theme="default">
+            重置
+          </Button>
+        </Space>
       </FormItem>
     </Form>
   );

diff --git a/src/form/hooks/useInstance.tsx b/src/form/hooks/useInstance.tsx
@@ -190,10 +190,10 @@ export default function useInstance(props: TdFormProps, formRef, formMapRef: Rea
     if (!Array.isArray(fields)) throw new Error('setFields 参数需要 Array 类型');
 
     fields.forEach((field) => {
-      const { name, value, status } = field;
+      const { name, ...restFields } = field;
       const formItemRef = getMapValue(name, formMapRef);
 
-      formItemRef?.current?.setField({ value, status });
+      formItemRef?.current?.setField({ ...restFields });
     });
   }