mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-07-25 07:56:54 +08:00
Code Issues Actions 15 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
? updateItemErrors
: (subName: string, subErrors: string[]) => {
if (!isEqual(inlineErrors[subName], subErrors)) {
setInlineErrors(prevInlineErrors => ({
...prevInlineErrors,
[subName]: subErrors,
}));
}
setInlineErrors((prevInlineErrors = {}) => {
if (!isEqual(prevInlineErrors[subName], subErrors)) {
return {
...prevInlineErrors,
[subName]: subErrors,
};
}
return prevInlineErrors;
});
};
// ===================== Children Ref =====================

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

@ -40,24 +40,78 @@ describe('Form', () => {
scrollIntoView.mockRestore();
});
it('noStyle Form.Item', async () => {
const onChange = jest.fn();
describe('noStyle Form.Item', () => {
it('work', async () => {
const onChange = jest.fn();
const wrapper = mount(
<Form>
<Form.Item>
<Form.Item name="test" rules={[{ required: true }]}>
<Input onChange={onChange} />
const wrapper = mount(
<Form>
<Form.Item>
<Form.Item name="test" rules={[{ required: true }]}>
<Input onChange={onChange} />
</Form.Item>
</Form.Item>
</Form.Item>
</Form>,
);
</Form>,
);
await change(wrapper, 0, '');
expect(wrapper.find('.ant-form-item-explain').length).toBeTruthy();
expect(wrapper.find('.ant-form-item-has-error').length).toBeTruthy();
await change(wrapper, 0, '');
expect(wrapper.find('.ant-form-item-explain').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', () => {