arco-design-vue icon indicating copy to clipboard operation
arco-design-vue copied to clipboard

表单实例新增getFormValue方法

Open MinGuoGuo opened this issue 1 year ago • 0 comments
trafficstars

基本信息

现有案例

// 具体实现 在现有的form.vue里面改造 在setup里面添加getFormValue方法

const getFormValue = () => {
      new Promise((resolve, reject) => {
        validate(errors => {
          if (!errors) {
            const data: Record<string, any> = {};
            for (const key in fields) {
              data[key] = model[key];
            }
            resolve(data)
          } else {
            reject(errors);
          }
        })
      }))
    }

在setup里面return

 innerGetFormVslue: getFormValue,

在methods里面添加

/**
     * @zh 获取表单值
     * @en get form values
     * @public
     * @returns {Promise<Record<string, any>>}
     */
    getFormValue(): Promise<Record<string, any>> {
      return this.innerGetFormVslue();
    }

预期解决问题

多个表单提交验证时获取值可可通过getFormValue方法去解决例如

表单实例
const form1 = ref()
const form1 = ref()

提交
const handleSubmitClick = async() => {
    const [data1, data2] = await Promise.all([ form1.value.getFormValue(),   form2.value.getFormValue()])
}



## 额外补充
这个功能真的很实用,尤其一个页面多个表单同时提交的时候,让我们提交的表单值更纯粹,所见即所得,页面表单展现了哪些formItem,就得到了哪些值

<!--- 声明: 如果提交带有攻击性的 issue,提交者将会被禁止在 arco-design 组织下发言。 -->
<!-- generated by arco-issue. DO NOT REMOVE -->

MinGuoGuo avatar Sep 12 '24 11:09 MinGuoGuo