ant-design/components/form/demo/complex-form-control.tsx
叶枫 54fb6bd831
Form.Item support noLabel (#51524)
* feat: Form.Item support noLabel

* feat: doc

* feat: test

* feat: test

* feat: test

* feat: review

* feat: review

* feat: 仅支持 span

* feat: review

* feat: review

* feat: review

* feat: review

* feat: review

* feat: test

* feat: test

* feat: test

* feat: test

* feat: test

* feat: test

* feat: add test

* feat: demo

* feat: test

* feat: test

* feat: test

* feat: 代码优化

* feat: add labelCol

* feat: 代码优化

* feat: 代码优化

* feat: reset

* feat: test

* feat: test

* feat: review

* feat: doc
2024-11-08 18:32:20 +08:00

78 lines
2.2 KiB
TypeScript

import React from 'react';
import { Button, Form, Input, Select, Space, Tooltip, Typography } from 'antd';
const { Option } = Select;
const onFinish = (values: any) => {
console.log('Received values of form: ', values);
};
const App: React.FC = () => (
<Form
name="complex-form"
onFinish={onFinish}
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ maxWidth: 600 }}
>
<Form.Item label="Username">
<Space>
<Form.Item
name="username"
noStyle
rules={[{ required: true, message: 'Username is required' }]}
>
<Input style={{ width: 160 }} placeholder="Please input" />
</Form.Item>
<Tooltip title="Useful information">
<Typography.Link href="#API">Need Help?</Typography.Link>
</Tooltip>
</Space>
</Form.Item>
<Form.Item label="Address">
<Space.Compact>
<Form.Item
name={['address', 'province']}
noStyle
rules={[{ required: true, message: 'Province is required' }]}
>
<Select placeholder="Select province">
<Option value="Zhejiang">Zhejiang</Option>
<Option value="Jiangsu">Jiangsu</Option>
</Select>
</Form.Item>
<Form.Item
name={['address', 'street']}
noStyle
rules={[{ required: true, message: 'Street is required' }]}
>
<Input style={{ width: '50%' }} placeholder="Input street" />
</Form.Item>
</Space.Compact>
</Form.Item>
<Form.Item label="BirthDate" style={{ marginBottom: 0 }}>
<Form.Item
name="year"
rules={[{ required: true }]}
style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
>
<Input placeholder="Input birth year" />
</Form.Item>
<Form.Item
name="month"
rules={[{ required: true }]}
style={{ display: 'inline-block', width: 'calc(50% - 8px)', margin: '0 8px' }}
>
<Input placeholder="Input birth month" />
</Form.Item>
</Form.Item>
<Form.Item label={null}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
export default App;