uniapp动态多表单校验成功之后调接口？

首先，我先简述一下我要实现的功能

每点击一次按钮生成一个由多个输入框组成的表单，每个表单的属性构成是完全一致的，只不过输入的属性值不同，要求对每一个表单的每一个输入框都验证，全部验证成功之后调取接口，上传数据

其次，我写一下我的代码

这是我的html部分

<uni-section :title="title+' '+index" type="line" v-for="(item, index) in dynamicLists" :key="index">
    <uni-forms ref="baseForm" :modelValue='dynamicLists[index]' :rules="rules">
		<uni-forms-item label="姓名" required name="name">
			<uni-easyinput
				v-model="item.name"
				placeholder="请输入你的姓名"
			/>
		</uni-forms-item>
		<uni-forms-item label="性别" required name="gender">
			<uni-easyinput
				v-model="item.gender"
				placeholder="请输入你的性别"
			/>
		</uni-forms-item>
	</uni-forms>
</uni-section>
<view class="button-group">
	<button class="button" size="mini" @click="add">新增</button>
	<button class="button" size="mini" @click="submit">提交</button>
</view>

在js中定义dynamicLists数据，定义rules数据

data() {
	return {
		title: '新增数据',
		dynamicLists: [
			{    
                id: Date.now(),
				name: '',
				gender: ''
			}
		],
		rules: {
		    name: {
			    rules: [{
				    required: true,
				    errorMessage: '姓名必填'
				}]
			},
			gender: {
			    rules: [{
				    required: true,
				    errorMessage: '性别必填'
			}]
        }
	}
}

下面我写一下我的方法

add(){
    this.dynamicLists.push({
	    id: Date.now(),
		name: '',
		gender: ''
	})
}

对于提交事件，这里要着重强调一下

1、validate方法是针对对象来说的，数组时不能使用该方法的

2、在提交事件中调接口中，正常的思维是，循环遍历定义的数组，对里面的内容进行校验，定义一个空数组变量，将validate方法的返回值push到变量中去，如果有输入框没有填写，返回对象组成的数组，输入框全部填写完成返回null组成的数组，它是一个二维数组的形式，然后判断数组中是否有内容进行调取接口，但是！不可以，你会发现你拿到的数组不是你push处理过的数组，而是你初始化定义的空数组

这不问题就来了~~~

原因：validate方法是异步的

解决方法(大佬解决的哈，不是我解决的，哈哈哈哈)：

重新封装了方法，使用promise.all，具体内容如下：

async handleValidte() {
	const promises = this.dynamicFormData.dynamicLists.map((item, index) => {
		return new Promise(resolve => {
			this.$refs.baseForm[index].validate(err => {
				resolve(err)
			})
		})
	})
	return await Promise.all(promises)
}

那么如何使用呢？请您往下看

async submit() {
	var validtateList = await this.handleValidte()
    // 扁平化
	var flat = validtateList.flat(2)
	const isTrue = flat.every(item => {
		return item === null
	})
	if(isTrue) {
        // 调接口
		ajax('接口', 'POST', JSON.stringify(this.dynamicLists)).then(res => {
			uni.showToast({
			title: `提交成功`
		})
        // 清数组
		this.dynamicLists = [{
			id: Date.now(),
			name: '',
            gender: ''
		}]
	}
}

好了，这个内容就到这里了，就当是纪念一下把！！