当字段无效时，如何禁用 Antd 表单外的提交按钮？

Question

我想在字段无效时禁用 Antd 表单外的提交按钮。请帮忙完成这个任务。

这是我的组件代码

const CreateAndEditForm = () => {
    
    const [form] = Form.useForm();

    const onSave = (e) => {
        form.submit()
       
    }
    return ( 
        <>
            <PageTitle title="Add New Form">
                <Space size="small">
                    <Button onClick={onSave} type="primary" htmlType="submit"
                    >
                        <SaveOutlined /> Save
                    </Button>
                </Space>
            </PageTitle>

            <Row>
                <Col span={24}>
                    <Form
                        form={form}
                        layout="vertical"
                        name="addForm"
                        requiredMark={false}
                    >
                            <Form.Item
                            name="name"
                            label="Name"
                            
                            rules={[{ required: true, message: 'Please Enter a Name' }]}
                            >
                                <Input />
                            </Form.Item>
                            
                            <Form.Item name="description" label="Description" rules={[{ required: true, message: 'Please Enter a Description' }]}>
                                <Input placeholder="Enter Description" />
                            </Form.Item>
                    </Form>
                </Col>
            </Row>
        </>
    );
}
 
export default CreateAndEditSchedule;

Answer 1

您可以在每次使用 onValuesChange 属性更改表单时进行检查。然后，一个钩子将允许您以正确的方式呈现提交按钮。

示例：

  const [formValid, setFormValid] = useState(true)
    
    <Form
       onValuesChange={() => setFormValid(form.getFieldsError().some((item) => item.errors.length > 0) }
    />

  <Button 
      onClick={onSave} 
      type="primary" 
      htmlType="submit"
      disabled={formValid}
  />

当字段无效时，如何禁用 Antd 表单外的提交按钮？

How to disable Submit button outside the Antd Form when the fields are invalid?

javascript

reactjs

antd

ant-design-pro