Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Dec 19, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fc8d339
fix(form): `value: [{ min: 0 }]` invalid and add test
RSS1102 Dec 17, 2024
8ea5da2
Merge branch 'Tencent:develop' into fix/form/rules
RSS1102 Dec 17, 2024
8569ad2
chore: optimize
uyarn Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions src/form/__tests__/form.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions src/form/formModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];

/**
* 校验某一条数据的某一条规则，一种校验规则不满足则不再进行校验。
Expand All @@ -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 && ![undefined, null].includes(rule[key])) {
// rule 值为 true 则表示没有校验参数，只是对值进行默认规则校验
vOptions = rule[key] === true ? undefined : rule[key];
vValidateFun = validateRule;
Expand Down
Loading