mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 00:29:12 +08:00
71 lines
2.0 KiB
Markdown
71 lines
2.0 KiB
Markdown
---
|
|
order: 5
|
|
title:
|
|
zh-CN: 嵌套结构与校验信息
|
|
en-US: Nest
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
`name` 属性支持嵌套数据结构。通过 `validateMessages` 或 `message` 自定义校验信息模板，模板内容可参考[此处](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts)。
|
|
|
|
## en-US
|
|
|
|
`name` prop support nest data structure. Customize validate message template with `validateMessages` or `message`. Ref [here](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) about message template.
|
|
|
|
```tsx
|
|
import { Button, Form, Input, InputNumber } from 'antd';
|
|
import React from 'react';
|
|
|
|
const layout = {
|
|
labelCol: { span: 8 },
|
|
wrapperCol: { span: 16 },
|
|
};
|
|
|
|
/* eslint-disable no-template-curly-in-string */
|
|
const validateMessages = {
|
|
required: '${label} is required!',
|
|
types: {
|
|
email: '${label} is not a valid email!',
|
|
number: '${label} is not a valid number!',
|
|
},
|
|
number: {
|
|
range: '${label} must be between ${min} and ${max}',
|
|
},
|
|
};
|
|
/* eslint-enable no-template-curly-in-string */
|
|
|
|
const App: React.FC = () => {
|
|
const onFinish = (values: any) => {
|
|
console.log(values);
|
|
};
|
|
|
|
return (
|
|
<Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
|
|
<Form.Item name={['user', 'name']} label="Name" rules={[{ required: true }]}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name={['user', 'email']} label="Email" rules={[{ type: 'email' }]}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name={['user', 'age']} label="Age" rules={[{ type: 'number', min: 0, max: 99 }]}>
|
|
<InputNumber />
|
|
</Form.Item>
|
|
<Form.Item name={['user', 'website']} label="Website">
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name={['user', 'introduction']} label="Introduction">
|
|
<Input.TextArea />
|
|
</Form.Item>
|
|
<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
|
|
<Button type="primary" htmlType="submit">
|
|
Submit
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
```
|