mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 07:09:55 +08:00
2cdf586291
* chore: fix lint * chore: fix lint * test: fix 16 * fix: lint
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import type { FormInstance } from 'antd';
|
|
import { Button, Form, Input, Space } from 'antd';
|
|
|
|
const SubmitButton = ({ form }: { form: FormInstance }) => {
|
|
const [submittable, setSubmittable] = React.useState(false);
|
|
|
|
// Watch all values
|
|
const values = Form.useWatch([], form);
|
|
|
|
React.useEffect(() => {
|
|
form.validateFields({ validateOnly: true }).then(
|
|
() => {
|
|
setSubmittable(true);
|
|
},
|
|
() => {
|
|
setSubmittable(false);
|
|
},
|
|
);
|
|
}, [values]);
|
|
|
|
return (
|
|
<Button type="primary" htmlType="submit" disabled={!submittable}>
|
|
Submit
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const [form] = Form.useForm();
|
|
|
|
return (
|
|
<Form form={form} name="validateOnly" layout="vertical" autoComplete="off">
|
|
<Form.Item name="name" label="Name" rules={[{ required: true }]}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="age" label="Age" rules={[{ required: true }]}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Space>
|
|
<SubmitButton form={form} />
|
|
<Button htmlType="reset">Reset</Button>
|
|
</Space>
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default App;
|