form on modal edit in ant design code example

Example 1: ant design form validation in the modal

const [isOpen, setIsOpen] = useState(false);
const [form] = Form.useForm();

const onSubmit = useCallback((values) => {
// do your staff with values
}, []);

const closePopup = useCallback(() => {
  form.resetFields();
  setIsOpen(false);
}, [form]);

<Modal
  visible={isOpen}
  onOk={form.submit}
  onCancel={closePopup}
>
  <Form
    form={form}
    onFinish={onSubmit}
  />
</Modal>

Example 2: ant design form validation in the modal

<Modal
   okButtonProps={{form:'category-editor-form', key: 'submit', htmlType: 'submit'}}
   onCancel={() => {
     dispatch({
      type: 'categoryEditor/closeEditor'
     })
   }}>
   <Form id='category-editor-form' layout="vertical" onFinish={onFinish}>

  </Form>