import React from 'react'; import type { FormInstance } from 'antd'; import { Button, Form, Input, Space } from 'antd'; interface SubmitButtonProps { form: FormInstance; } const SubmitButton: React.FC<React.PropsWithChildren<SubmitButtonProps>> = ({ form, children }) => { const [submittable, setSubmittable] = React.useState<boolean>(false); // Watch all values const values = Form.useWatch([], form); React.useEffect(() => { form .validateFields({ validateOnly: true }) .then(() => setSubmittable(true)) .catch(() => setSubmittable(false)); }, [form, values]); return ( <Button type="primary" htmlType="submit" disabled={!submittable}> {children} </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}>Submit</SubmitButton> <Button htmlType="reset">Reset</Button> </Space> </Form.Item> </Form> ); }; export default App;