mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-07-29 02:26:27 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

fix: Collect FormItem errors should be sync with state (#25737)

Browse Source 
* passing error logic

* fix: Collect FormItem errors should be sync with stat
This commit is contained in:
二货机器人 2020-07-21 20:51:36 +08:00 committed by GitHub
parent 9728b9cc15
commit 356812627f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 77 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/form/FormItem.tsx
View File

@ -122,12 +122,15 @@ function FormItem(props: FormItemProps): React.ReactElement {
const updateChildItemErrors = noStyle const updateChildItemErrors = noStyle
? updateItemErrors ? updateItemErrors
: (subName: string, subErrors: string[]) => { : (subName: string, subErrors: string[]) => {
if (!isEqual(inlineErrors[subName], subErrors)) { setInlineErrors((prevInlineErrors = {}) => {
setInlineErrors(prevInlineErrors => ({ if (!isEqual(prevInlineErrors[subName], subErrors)) {
...prevInlineErrors, return {
[subName]: subErrors, ...prevInlineErrors,
})); [subName]: subErrors,
} };
}
return prevInlineErrors;
});
}; };
// ===================== Children Ref ===================== // ===================== Children Ref =====================

82
components/form/__tests__/index.test.js
View File

@ -40,24 +40,78 @@ describe('Form', () => {
scrollIntoView.mockRestore(); scrollIntoView.mockRestore();
}); });
it('noStyle Form.Item', async () => { describe('noStyle Form.Item', () => {
const onChange = jest.fn(); it('work', async () => {
const onChange = jest.fn();
const wrapper = mount( const wrapper = mount(
<Form> <Form>
<Form.Item> <Form.Item>
<Form.Item name="test" rules={[{ required: true }]}> <Form.Item name="test" rules={[{ required: true }]}>
<Input onChange={onChange} /> <Input onChange={onChange} />
</Form.Item>
</Form.Item> </Form.Item>
</Form.Item> </Form>,
</Form>, );
);
await change(wrapper, 0, ''); await change(wrapper, 0, '');
expect(wrapper.find('.ant-form-item-explain').length).toBeTruthy(); expect(wrapper.find('.ant-form-item-explain').length).toBeTruthy();
expect(wrapper.find('.ant-form-item-has-error').length).toBeTruthy(); expect(wrapper.find('.ant-form-item-has-error').length).toBeTruthy();
expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalled();
});
it('should clean up', async () => {
const Demo = () => {
const [form] = Form.useForm();
return (
<Form form={form} initialValues={{ aaa: '2' }}>
<Form.Item name="aaa">
<Input
onChange={async () => {
await sleep(0);
try {
await form.validateFields();
} catch (e) {
// do nothing
}
}}
/>
</Form.Item>
<Form.Item shouldUpdate noStyle>
{() => {
const aaa = form.getFieldValue('aaa');
if (aaa === '1') {
return (
<Form.Item name="bbb" rules={[{ required: true, message: 'aaa' }]}>
<Input />
</Form.Item>
);
}
return (
<Form.Item>
<Form.Item name="ccc" rules={[{ required: true, message: 'ccc' }]} noStyle>
<Input />
</Form.Item>
</Form.Item>
);
}}
</Form.Item>
</Form>
);
};
const wrapper = mount(<Demo />);
await change(wrapper, 0, '1');
expect(wrapper.find('.ant-form-item-explain').text()).toEqual('aaa');
await change(wrapper, 0, '2');
expect(wrapper.find('.ant-form-item-explain').text()).toEqual('ccc');
await change(wrapper, 0, '1');
expect(wrapper.find('.ant-form-item-explain').text()).toEqual('aaa');
});
}); });
it('`shouldUpdate` should work with render props', () => { it('`shouldUpdate` should work with render props', () => {