需求:多个表单,我想一起校验一起提交,比如这里的上下两个部分为两个组件,两个form表单

功能点:1.所有报表需通过校验

2.通过校验后提交并带入所有参数

核心问题:form表单的validateFields()返回的是一个promise对象,也就是说他是一个异步方法,对标的的校验必定有异步问题.而且无论前一个表单校验成功与否,后一个表单都需要继续校验.只不过只要有不通过的,就不提交.

解决方案:

1.无论成功与否都需要继续,即不分前后. Promise.all()

2.校验接受后需要拿到对应的表单值 .新建一个promise对象,res返回对应表单values.失败即返回失败

所以,把每个表单的校验过程都注册成一个promise对象,在validateFields().then()里面返回values,在.catch返回失败信息,然后用Promise.all()统一提交和监听,在.then()里面能拿到所有表单返回的values,然后统一处理提交.

代码:

formList.length > 0 &&
formList.map((item, index) => {
let promiseObj = new Promise((res, rej) => {
item.form
.validateFields()
.then((values) => {
res(values);
})
.catch((error) => {
rej('失败');
});
});
arr.push(promiseObj);
});
Promise.all(arr)
.then((res) => {
if (res.length > 0) {
res.map((item) => {
allParams = { ...allParams, ...item };
});
dispatch({
type: 'common/submit',
payload: { ...allParams },
});
}
})
.catch((error) => {
console.log('error', error);
});

【antd】表单-单页面多表单提交功能的更多相关文章

  1. form表单action提交表单,页面不跳转且表单数据含文件的处理方法

    在最近的项目中需要将含 input[type='file']的表单提交给后台 ,并且后台需要将文件存储在数据库中.之前所用的方法都是先将文件上传到七牛服务器上,然后七牛会返回文件的下载地址,在提交表单 ...

  2. 一个漂亮的js表单验证页面+验证码

    一个漂亮的js表单验证页面 见图知其意, 主要特性 带密码安全系数的判断 其他的就没有啥啦 嘿嘿嘿 当然,其代码也在Github上 我也准备了一套可以直接Ctrl + v; Ctrl + c 运行的代 ...

  3. ajax和servlet交互,表单日历插件,表单验证,form.js

    我的index.jsp <body> <a>点我获取数据</a> <table border=1px> <tr> <td>ID& ...

  4. 如何给动态添加的form表单控件添加表单验证

    最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...

  5. Javascript高级编程学习笔记(74)—— 表单(2)表单提交及重置

    表单提交 表单的很大一部分作用就是帮助用户完成和服务器的交互 所以表单提交是表单中比较重要的部分 虽然现如今的大部分应用场景都使用 AJAX 的异步请求来代替表单,但是仍有部分操作需要使用表单来完成, ...

  6. [转]SpringMVC<from:form>表单标签和<input>表单标签简介

    原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...

  7. 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  8. 使用aop注解实现表单防重复提交功能

    原文:https://www.cnblogs.com/manliu/articles/5983888.html 1.这里采用的方法是:使用get请求进入表单页面时,后台会生成一个tokrn_flag分 ...

  9. Dw 表单制作 与 dedecms 结合实现提交效果

    Dw 表单制作 与 dedecms 结合实现提交效果 自定义表单的用处 1.教育类网站的学员报名 2.企业网站的在线订单 3.普通网页上的一些和用户交互的小功能 实现原理:首先添加表单:核心-频道模型 ...

随机推荐

  1. go 错误处理设计思考

    前段时间准备对线上一个golang系统服务进行内部开源,对代码里面的错误处理进行了一波优化. 优化的几个原因: 错误处理信息随意,未分类未定义.看到错误日志不能第一时间定位 错误的日志重复,有时候一个 ...

  2. Kafka连接器建立数据管道

    1.概述 最近,有同学留言咨询Kafka连接器的相关内容,今天笔者给大家分享一下Kafka连接器建立数据管道的相关内容. 2.内容 Kafka连接器是一种用于Kafka系统和其他系统之间进行功能扩展. ...

  3. ICCV2021 | 渐进采样式Vision Transformer

    ​  前言  ViT通过简单地将图像分割成固定长度的tokens,并使用transformer来学习这些tokens之间的关系.tokens化可能会破坏对象结构,将网格分配给背景等不感兴趣的区域,并引 ...

  4. 2017Java前景怎么样?

    当今社会互联网软件行业属于高薪技术行业,伴随着互联网的发展Java在Web领域的优势也日渐凸显,并且java语言本身就应用最广泛,最高效.据说,全球有25亿Java器件运行着Java,450多万Jav ...

  5. 全面了解 Javascript Prototype Chain 原型链

    原型链可以说是Javascript的核心特征之一,当然也是难点之一.学过其它面向对象的编程语言后再学习Javascript多少会感到有些迷惑.虽然Javascript也可以说是面向对象的语言,但是其实 ...

  6. 带你了解Typescript的14个基础语法

    摘要:Typescript可以说是JavaScript的超集,在JS的基础上新增了许多语法特性,使得类型不再可以随意转换,能大大减少开发阶段的错误. 本文分享自华为云社区<Typescript基 ...

  7. 洛谷 P5853 - [USACO19DEC]Tree Depth P(生成函数+背包)

    洛谷题面传送门 神仙题. 首先考虑一个点的深度是什么,注意到对于笛卡尔树而言直接从序列的角度计算一个点的深度是不容易的,因为这样会牵扯到序列中多个元素,需要 fixed 的东西太多,计算起来太复杂了. ...

  8. Codeforces 1270H - Number of Components(线段树)

    Codeforces 题目传送门 & 洛谷题目传送门 首先需发现一个性质,那就是每一个连通块所对应的是一个区间.换句话说 \(\forall l<r\),若 \(l,r\) 在同一连通块 ...

  9. 【比较基因组】McScan jcvi比较两个基因组共线性细节记录

    目录 软件的安装 基因组的准备 一些细节 建议和示例 软件的安装 Python版McScan(jcvi工具包):https://github.com/tanghaibao/jcvi 以前只有pytho ...

  10. 详细解析Thinkphp5.1源码执行入口文件index.php运行过程

    详细解析Thinkphp5.1源码执行入口文件index.php运行过程 运行了public目录下的index.php文件后,tp的运行整个运行过程的解析 入口文件index.php代码如下: < ...