mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 19:42:54 +08:00
fix: Form.Item with help
should display error style when validate failed (#25582)
* fix: Form.Item does not display validation message when set help * fix: Form.Item does not display validation message when set help * update: code style
This commit is contained in:
parent
5792b6e7c1
commit
fb869021aa
@ -161,11 +161,11 @@ function FormItem(props: FormItemProps): React.ReactElement {
|
|||||||
let mergedValidateStatus: ValidateStatus = '';
|
let mergedValidateStatus: ValidateStatus = '';
|
||||||
if (validateStatus !== undefined) {
|
if (validateStatus !== undefined) {
|
||||||
mergedValidateStatus = validateStatus;
|
mergedValidateStatus = validateStatus;
|
||||||
} else if (meta && meta.validating) {
|
} else if (meta?.validating) {
|
||||||
mergedValidateStatus = 'validating';
|
mergedValidateStatus = 'validating';
|
||||||
} else if (!help && mergedErrors.length) {
|
} else if (meta?.errors?.length) {
|
||||||
mergedValidateStatus = 'error';
|
mergedValidateStatus = 'error';
|
||||||
} else if (meta && meta.touched) {
|
} else if (meta?.touched) {
|
||||||
mergedValidateStatus = 'success';
|
mergedValidateStatus = 'success';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -354,6 +354,20 @@ describe('Form', () => {
|
|||||||
expect(wrapper.find('.ant-form-item-explain').length).toBeTruthy();
|
expect(wrapper.find('.ant-form-item-explain').length).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('Form.Item with `help` should display error style when validate failed', async () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<Form>
|
||||||
|
<Form.Item name="test" help="help" rules={[{ required: true, message: 'message' }]}>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
</Form>,
|
||||||
|
);
|
||||||
|
|
||||||
|
await change(wrapper, 0, '');
|
||||||
|
expect(wrapper.find('.ant-form-item').first().hasClass('ant-form-item-has-error')).toBeTruthy();
|
||||||
|
expect(wrapper.find('.ant-form-item-explain').text()).toEqual('help');
|
||||||
|
});
|
||||||
|
|
||||||
// https://github.com/ant-design/ant-design/issues/21167
|
// https://github.com/ant-design/ant-design/issues/21167
|
||||||
it('`require` without `name`', () => {
|
it('`require` without `name`', () => {
|
||||||
const wrapper = mount(
|
const wrapper = mount(
|
||||||
|
Loading…
Reference in New Issue
Block a user