表单提交，两个submit，如何区分，data-* 获取不到

[ant-design]

表单提交，两个submit，如何区分，data-* 获取不到

[56600535]

我也有相同的问题，我有两个提交，一个是预览订单，一个是提交订单，需求没法做。

[Alpsli]

我们正在重构当前的表单，这个问题我这边临时解决下

[56600535]

我们正在重构当前的表单，这个问题我这边临时解决下

我尝试了一下 onTap会在 htmlType="submit"之前执行，所以我给绑定了一个点击事件设置一个标记，并在submit事件中进行判断，然后执行不同的逻辑，我不确定onTap事件是否总是可以在submit之前执行，但这临时的解决了我的问题。

// buy.js
Page({
  data: {
    // 提交是否是预览订单
    previewOrderFlag: false
  },
  // 表单提交事件
  orderSubmit(e) {
    if(this.data.previewOrderFlag){
      this.previewOrder();
      return;
    }
   // 这里是提交的逻辑
  },
  previewOrder(){
    if(this.data.previewOrderFlag){
      // 预览订单逻辑
      this.setData({
        previewOrderFlag: false
      })
    }else {
      this.setData({
        previewOrderFlag: true
      })
    }
  }
}

[56600535]

我们正在重构当前的表单，这个问题我这边临时解决下

我不是一个专业的前端工程师，您知道onTap和 submit是同步还是异步执行吗？我想知道这样做是否会有问题。

[Alpsli]

onTap 是会立刻执行，submit 会触发form的validate校验等，你这样写是ok的，如果你还担心时序问题，你可以给handlesubmit 采用 setTimeout 异步执行

[jc9702507]

#305

[jc9702507]

1.0 使用方式：

<form-input
  label="用户名"
  name="account"
  ref="handleForm1"
/>

<form-input
  label="密码"
  name="password"
  password
  ref="handleForm1"
/>

<button onTap="submitForm1">提交表单1</button>

<form-input
  label="用户名"
  name="account"
  ref="handleForm2"
/>

<form-input
  label="密码"
  name="password"
  ref="handleForm1"
/>

<button onTap="submitForm1">提交表单2</button>

import Form from 'antd-mini/es/Form/form';

Page({
  form1: new Form(), // 表单1 
  form2: new Form(), // 表单2
  handleForm1(ref) {
    this.form1.addItem(ref);
  },
  handleForm2(ref) {
    this.form2.addItem(ref);
  },
  async submitForm1() {
    const values = await this.form1.submit();
    console.log(values);
  },
  async submitForm2() {
    const values = await this.form2.submit();
    console.log(values);
  },
});

[jc9702507]

https://ant-design-mini.antgroup.com/components/form#%E5%A4%9A%E4%B8%AA%E8%A1%A8%E5%8D%95 多个表单示例