fix(form): value: [{ min: 0 }] invalid and add test

Tencent · Dec 17, 2024 · fc8d339 · fc8d339
1 parent 72e9f22
commit fc8d339
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 2 deletions.
diff --git a/src/form/__tests__/form.test.tsx b/src/form/__tests__/form.test.tsx
@@ -7,6 +7,7 @@ import Input from '../../input';
 import Button from '../../button';
 import Radio from '../../radio';
 import { HelpCircleIcon } from 'tdesign-icons-react';
+import InputNumber from '../../input-number';
 
 const { FormItem, FormList } = Form;
 
@@ -423,6 +424,62 @@ describe('Form 组件测试', () => {
     expect(container.querySelector('.t-input__extra').innerHTML).toBe('please input username');
   });
 
+  test('FormItem rules min max', async () => {
+    const TestForm = () => {
+      const initialValues = {
+        year1: -2,
+        year2: 1,
+        year3: 4,
+        year4: -4,
+        year5: -1,
+        year6: 2,
+      };
+      return (
+        <Form initialData={initialValues}>
+          <FormItem name="year1" rules={[{ min: -3, message: 'year1  error' }]}>
+            <InputNumber placeholder="year1" />
+          </FormItem>
+          <FormItem name="year2" rules={[{ min: 0, message: 'year2  error' }]}>
+            <InputNumber placeholder="year2" />
+          </FormItem>
+          <FormItem name="year3" rules={[{ min: 3, message: 'year3  error' }]}>
+            <InputNumber placeholder="year3" />
+          </FormItem>
+          <FormItem name="year4" rules={[{ max: -3, message: 'year4  error' }]}>
+            <InputNumber placeholder="year4" />
+          </FormItem>
+          <FormItem name="year5" rules={[{ max: 0, message: 'year5  error' }]}>
+            <InputNumber placeholder="year5" />
+          </FormItem>
+          <FormItem name="year6" rules={[{ max: 3, message: 'year6  error' }]}>
+            <InputNumber placeholder="year6" />
+          </FormItem>
+          <FormItem>
+            <Button type="submit">提交</Button>
+          </FormItem>
+        </Form>
+      );
+    };
+    const { container, getByText, getByPlaceholderText } = render(<TestForm />);
+    fireEvent.click(getByText('提交'));
+    await mockDelay();
+    expect(container.querySelector('.t-input__extra')).toBeNull();
+
+    // 错误验证
+    fireEvent.change(getByPlaceholderText('year1'), { target: { value: -4 } });
+    fireEvent.change(getByPlaceholderText('year2'), { target: { value: -1 } });
+    fireEvent.change(getByPlaceholderText('year3'), { target: { value: 2 } });
+    fireEvent.change(getByPlaceholderText('year4'), { target: { value: -2 } });
+    fireEvent.change(getByPlaceholderText('year5'), { target: { value: 1 } });
+    fireEvent.change(getByPlaceholderText('year6'), { target: { value: 4 } });
+    fireEvent.click(getByText('提交'));
+    await mockDelay();
+    const input__extraList = container.querySelectorAll('.t-input__extra');
+    input__extraList.forEach((item: { innerHTML: string }, index: number) => {
+      expect(item.innerHTML).toBe(`year${index + 1}  error`);
+    });
+  });
+
   test('动态渲染并初始赋值', () => {
     const TestForm = () => {
       const [form] = Form.useForm();

diff --git a/src/form/formModel.ts b/src/form/formModel.ts
@@ -54,7 +54,7 @@ const VALIDATE_MAP = {
   validator: (val: ValueType, validate: CustomValidator): ReturnType<CustomValidator> => validate(val),
 };
 
-export type ValidateFuncType = typeof VALIDATE_MAP[keyof typeof VALIDATE_MAP];
+export type ValidateFuncType = (typeof VALIDATE_MAP)[keyof typeof VALIDATE_MAP];
 
 /**
  * 校验某一条数据的某一条规则，一种校验规则不满足则不再进行校验。
@@ -75,7 +75,7 @@ export async function validateOneRule(value: ValueType, rule: FormRule): Promise
     }
     const validateRule: ValidateFuncType = VALIDATE_MAP[key];
     // 找到一个校验规则，则无需再找，因为参数只允许对一个规则进行校验
-    if (validateRule && rule[key]) {
+    if (validateRule && rule[key] !== undefined && rule[key] !== null) {
       // rule 值为 true 则表示没有校验参数，只是对值进行默认规则校验
       vOptions = rule[key] === true ? undefined : rule[key];
       vValidateFun = validateRule;