ant-design/components/form/demo/basic.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

59 lines
1.3 KiB
TypeScript

import React from 'react';
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';
type FieldType = {
username?: string;
password?: string;
remember?: string;
};
const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
console.log('Success:', values);
};
const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
console.log('Failed:', errorInfo);
};
const App: React.FC = () => (
<Form
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ maxWidth: 600 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item<FieldType>
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item<FieldType>
label="Password"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item<FieldType> name="remember" valuePropName="checked" label={null}>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item label={null}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
export default App;