Browse Source
fix: `ConfigProvider` merge form validateMessages not inheriting from parent bug (#43239)
* test(CP): add Form unit case
* fix: `ConfigProvider ` merge form validateMessages not inheriting from parent bug
pull/43405/head
Wuxh
1 year ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with
39 additions and
0 deletions
-
components/config-provider/__tests__/form.test.tsx
-
components/config-provider/context.ts
-
components/config-provider/index.tsx
|
|
@ -148,6 +148,42 @@ describe('ConfigProvider.Form', () => { |
|
|
|
'age must be between 18-99', |
|
|
|
); |
|
|
|
}); |
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/43210
|
|
|
|
it('should merge parent ConfigProvider validateMessages', async () => { |
|
|
|
const MyForm = () => ( |
|
|
|
<Form> |
|
|
|
<Form.Item name="name" label="Name" rules={[{ required: true }]}> |
|
|
|
<Input /> |
|
|
|
</Form.Item> |
|
|
|
<Button type="primary" htmlType="submit"> |
|
|
|
Submit |
|
|
|
</Button> |
|
|
|
</Form> |
|
|
|
); |
|
|
|
|
|
|
|
const { container, getAllByRole, getAllByText } = render( |
|
|
|
<ConfigProvider> |
|
|
|
<MyForm /> |
|
|
|
<ConfigProvider form={{ validateMessages: { required: 'Required' } }}> |
|
|
|
<MyForm /> |
|
|
|
<ConfigProvider> |
|
|
|
<MyForm /> |
|
|
|
</ConfigProvider> |
|
|
|
</ConfigProvider> |
|
|
|
</ConfigProvider>, |
|
|
|
); |
|
|
|
|
|
|
|
const submitButtons = getAllByRole('button'); |
|
|
|
expect(submitButtons).toHaveLength(3); |
|
|
|
submitButtons.forEach(fireEvent.click); |
|
|
|
|
|
|
|
await waitFakeTimer(); |
|
|
|
|
|
|
|
expect(container.querySelectorAll('.ant-form-item-explain-error')).toHaveLength(3); |
|
|
|
expect(getAllByText('Please enter Name')).toHaveLength(1); |
|
|
|
expect(getAllByText('Required')).toHaveLength(2); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
describe('form requiredMark', () => { |
|
|
|
|
|
@ -1,4 +1,5 @@ |
|
|
|
import type { DerivativeFunc } from '@ant-design/cssinjs'; |
|
|
|
import type { ValidateMessages } from 'rc-field-form/lib/interface'; |
|
|
|
import * as React from 'react'; |
|
|
|
import type { Options } from 'scroll-into-view-if-needed'; |
|
|
|
import type { ButtonProps } from '../button'; |
|
|
@ -81,6 +82,7 @@ export interface ConfigConsumerProps { |
|
|
|
requiredMark?: RequiredMark; |
|
|
|
colon?: boolean; |
|
|
|
scrollToFirstError?: Options | boolean; |
|
|
|
validateMessages?: ValidateMessages; |
|
|
|
}; |
|
|
|
theme?: ThemeConfig; |
|
|
|
select?: { |
|
|
|
|
|
@ -319,6 +319,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => { |
|
|
|
merge( |
|
|
|
defaultLocale.Form?.defaultValidateMessages || {}, |
|
|
|
memoedConfig.locale?.Form?.defaultValidateMessages || {}, |
|
|
|
memoedConfig.form?.validateMessages || {}, |
|
|
|
form?.validateMessages || {}, |
|
|
|
), |
|
|
|
[memoedConfig, form?.validateMessages], |
|
|
|