mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-29 18:50:00 +08:00
feat: Form validateMessages
support ${label}
(#21835)
* update form deps * update demo * update test case
This commit is contained in:
parent
5d63040837
commit
661ff7921d
@ -63,6 +63,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
|
||||
validateStatus,
|
||||
children,
|
||||
required,
|
||||
label,
|
||||
trigger = 'onChange',
|
||||
validateTrigger = 'onChange',
|
||||
...restProps
|
||||
@ -204,9 +205,15 @@ function FormItem(props: FormItemProps): React.ReactElement {
|
||||
return renderLayout(children as ChildrenNodeType);
|
||||
}
|
||||
|
||||
const variables: Record<string, string> = {};
|
||||
if (typeof label === 'string') {
|
||||
variables.label = label;
|
||||
}
|
||||
|
||||
return (
|
||||
<Field
|
||||
{...props}
|
||||
messageVariables={variables}
|
||||
trigger={trigger}
|
||||
validateTrigger={validateTrigger}
|
||||
onReset={() => {
|
||||
|
@ -593,4 +593,26 @@ describe('Form', () => {
|
||||
|
||||
expect(errorSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('`label` support template', async () => {
|
||||
const wrapper = mount(
|
||||
// eslint-disable-next-line no-template-curly-in-string
|
||||
<Form validateMessages={{ required: '${label} is good!' }}>
|
||||
<Form.Item name="test" label="Bamboo" rules={[{ required: true }]}>
|
||||
<input />
|
||||
</Form.Item>
|
||||
</Form>,
|
||||
);
|
||||
|
||||
wrapper.find('form').simulate('submit');
|
||||
await delay(50);
|
||||
wrapper.update();
|
||||
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-form-item-explain')
|
||||
.first()
|
||||
.text(),
|
||||
).toEqual('Bamboo is good!');
|
||||
});
|
||||
});
|
||||
|
@ -22,13 +22,13 @@ const layout = {
|
||||
};
|
||||
|
||||
const validateMessages = {
|
||||
required: 'This field is required!',
|
||||
required: '${label} is required!',
|
||||
types: {
|
||||
email: 'Not a validate email!',
|
||||
number: 'Not a validate number!',
|
||||
email: '${label} is not validate email!',
|
||||
number: '${label} is not a validate number!',
|
||||
},
|
||||
number: {
|
||||
range: 'Must be between ${min} and ${max}',
|
||||
range: '${label} must be between ${min} and ${max}',
|
||||
},
|
||||
};
|
||||
|
||||
|
@ -109,7 +109,7 @@
|
||||
"rc-dialog": "~7.6.0",
|
||||
"rc-drawer": "~3.1.1",
|
||||
"rc-dropdown": "~3.0.0",
|
||||
"rc-field-form": "~1.0.0",
|
||||
"rc-field-form": "~1.1.0",
|
||||
"rc-input-number": "~4.5.4",
|
||||
"rc-mentions": "~1.0.0",
|
||||
"rc-menu": "~8.0.1",
|
||||
|
Loading…
Reference in New Issue
Block a user