[Dialog]有没有优雅一点的Dialog API form

[xmsz]

Component

Dialog

Feature Description

背景

• 日常使用中，弹窗 表单的需求实在太常见了，比如

然后我们的需求是

• 使用dialog.show这类的api调用
• 点击「确认」按钮的时候，触发表单校验，然后提交，然后根据结果是否关闭弹窗

现在我们用的方法是，利用dialog.dialogRender，包了一层form，然后okProps.children改为Form.Submit

import { Dialog, Form } from '@alifd/next';
import { QuickShowConfig } from '@alifd/next/types/dialog';

const DialogForm = () => {};

DialogForm.show = ({
  onSubmit,
  defaultValue,
  ...props
}: Omit<QuickShowConfig, 'onSubmit' | 'defaultValue'> & {
  onSubmit?: (value: any) => void;
  defaultValue?: any;
}) => {
  console.log(defaultValue);
  const inst = Dialog.show({
    closeMode: [],
    v2: true,
    dialogRender: (model) => (
      <Form className="mx-auto" value={defaultValue}>
        {model}
      </Form>
    ),
    okProps: {
      children: (
        <Form.Submit
          className="-mx-3"
          type="primary"
          validate
          component="a"
          onClick={(value, error) => {
            console.log(value, error);
            if (error) return;
            onSubmit?.(value);
          }}
        >
          提交
        </Form.Submit>
      ),
    },
    onOk: () => {
      return false;
    },
    ...props,
  });

  return inst;
};

export default DialogForm;

这样也有很缺点，写起来也很麻烦

想问一下，有没有更好的方法来写

[bindoon]

非常好的建议，我自己也提交过一个issue来做Dialog优化： https://github.com/alibaba-fusion/next/issues/4054

目前看起来两个方案都不满意