## Add User Form on Drawer with Ant Design and TypeScript
Below is a sample code snippet that demonstrates how to create a drawer with a form to add a user using Ant Design and TypeScript in a React application.
### Installation
Ensure you have installed the necessary packages:
```bash
npm install antd
```
### Code
```tsx
import React, { useState } from 'react';
import { Drawer, Form, Button, Input, Select, Space } from 'antd';
interface User {
firstName: string;
lastName: string;
email: string;
age: number;
gender: string;
phoneNumber: string;
}
const AddUserForm: React.FC = () => {
const [visible, setVisible] = useState(false);
const [form] = Form.useForm();
const onFinish = (values: User) => {
console.log('Received values of form: ', values);
// Call API to add user here
};
const onReset = () => {
form.resetFields();
};
return (
<Space>
<Button type="primary" onClick={() => setVisible(true)}>
Add User
</Button>
<Drawer
title="Add User"
width={500}
onClose={() => setVisible(false)}
visible={visible}
>
<Form form={form} onFinish={onFinish} layout="vertical">
<Form.Item
label="First Name"
name="firstName"
rules={[{ required: true, message: 'Please input your first name!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Last Name"
name="lastName"
rules={[{ required: true, message: 'Please input your last name!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Email"
name="email"
rules={[
{ required: true, message: 'Please input your email!' },
{ type: 'email', message: 'Invalid email format!' },
]}
>
<Input />
</Form.Item>
<Form.Item
label="Age"
name="age"
rules={[{ required: true, message: 'Please input your age!' }]}
>
<Input type="number" />
</Form.Item>
<Form.Item
label="Gender"
name="gender"
rules={[{ required: true, message: 'Please select your gender!' }]}
>
<Select>
<Select.Option value="male">Male</Select.Option>
<Select.Option value="female">Female</Select.Option>
<Select.Option value="other">Other</Select.Option>
</Select>
</Form.Item>
<Form.Item
label="Phone Number"
name="phoneNumber"
rules={[{ required: true, message: 'Please input your phone number!' }]}
>
<Input />
</Form.Item>
<Form.Item>
<Space>
<Button type="primary" htmlType="submit">
Add User
</Button>
<Button type="default" onClick={onReset}>
Reset
</Button>
</Space>
</Form.Item>
</Form>
</Drawer>
</Space>
);
};
export default AddUserForm;
```
### Explanation
* We create a state variable `visible` to control the visibility of the drawer and a form instance using `Form.useForm()`.
* The `onFinish` function is called when the form is submitted. It logs the received values and is where you'd typically make an API call to add the user.
* The `onReset` function resets the form fields.
* The drawer contains a form with fields for first name, last name, email, age, gender, and phone number. Each field has validation rules.
* The form is wrapped in a `Space` component for better spacing.
### Usage
You can use the `AddUserForm` component in your application like any other React component:
```tsx
import React from 'react';
import AddUserForm from './AddUserForm';
const App: React.FC = () => {
return (
<div>
<AddUserForm />
</div>
);
};
export default App;
```
Uppercopy
Mini tools
Transform compassion into captivating visuals.Open
