mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
|
import React, { useEffect, useState } from 'react';
|
||
|
import { Button, Checkbox, Form, Input } from 'antd';
|
||
|
|
||
|
const formItemLayout = {
|
||
|
labelCol: { span: 4 },
|
||
|
wrapperCol: { span: 8 },
|
||
|
};
|
||
|
|
||
|
const formTailLayout = {
|
||
|
labelCol: { span: 4 },
|
||
|
wrapperCol: { span: 8, offset: 4 },
|
||
|
};
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [form] = Form.useForm();
|
||
|
const [checkNick, setCheckNick] = useState(false);
|
||
|
|
||
|
useEffect(() => {
|
||
|
form.validateFields(['nickname']);
|
||
|
}, [checkNick, form]);
|
||
|
|
||
|
const onCheckboxChange = (e: { target: { checked: boolean } }) => {
|
||
|
setCheckNick(e.target.checked);
|
||
|
};
|
||
|
|
||
|
const onCheck = async () => {
|
||
|
try {
|
||
|
const values = await form.validateFields();
|
||
|
console.log('Success:', values);
|
||
|
} catch (errorInfo) {
|
||
|
console.log('Failed:', errorInfo);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<Form form={form} name="dynamic_rule">
|
||
|
<Form.Item
|
||
|
{...formItemLayout}
|
||
|
name="username"
|
||
|
label="Name"
|
||
|
rules={[
|
||
|
{
|
||
|
required: true,
|
||
|
message: 'Please input your name',
|
||
|
},
|
||
|
]}
|
||
|
>
|
||
|
<Input placeholder="Please input your name" />
|
||
|
</Form.Item>
|
||
|
<Form.Item
|
||
|
{...formItemLayout}
|
||
|
name="nickname"
|
||
|
label="Nickname"
|
||
|
rules={[
|
||
|
{
|
||
|
required: checkNick,
|
||
|
message: 'Please input your nickname',
|
||
|
},
|
||
|
]}
|
||
|
>
|
||
|
<Input placeholder="Please input your nickname" />
|
||
|
</Form.Item>
|
||
|
<Form.Item {...formTailLayout}>
|
||
|
<Checkbox checked={checkNick} onChange={onCheckboxChange}>
|
||
|
Nickname is required
|
||
|
</Checkbox>
|
||
|
</Form.Item>
|
||
|
<Form.Item {...formTailLayout}>
|
||
|
<Button type="primary" onClick={onCheck}>
|
||
|
Check
|
||
|
</Button>
|
||
|
</Form.Item>
|
||
|
</Form>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|