Skip to content

Instantly share code, notes, and snippets.

@romelgomez
Created February 23, 2023 14:33
Show Gist options
  • Save romelgomez/25f38ccc36810b3c7e27692e2ac9517c to your computer and use it in GitHub Desktop.
Save romelgomez/25f38ccc36810b3c7e27692e2ac9517c to your computer and use it in GitHub Desktop.
ant basic usage form
import { useState } from 'react';
import { Form, Input, Button, Checkbox, Card } from 'antd';
export const BasicUsageForm = () => {
const [date, setDate] = useState<string | undefined>(undefined);
const onSave = () => {
console.log(
JSON.stringify({
date,
})
);
};
// moment.Moment
const onDateOfBirthChanged = (date: any) => {
setDate(date.format('DD/MM/YYYY'));
};
const onFinish = (values: any) => {
console.log('Success:', JSON.stringify(values));
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
return (
<Card title="Example form - 001">
<div>
<Form
// [styles]
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
// [settings]
name="basic"
initialValues={{ remember: true }}
autoComplete="off"
// [events]
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
wrapperCol={{ offset: 8, span: 16 }}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</div>
</Card>
);
};
export default BasicUsageForm;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment