vue+element+ts。 提交校验多个表单

点击按钮进行表单提交，同时校验 多个表单. （运用的ts开发）代码如下：

//表单一
   <el-form
          class="form-box"
          ref="ruleForm"
          :rules="rules"
          :model="data"
          label-position="top"
          label-width="180px"
          :inline="true"
        >
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="商品ID" prop="out_id">
                <el-input
                  v-model="data.out_id"
                  maxlength="100"
                  placeholder="请输入商品ID"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品名称" prop="name">
                <el-input
                  v-model="data.name"
                  maxlength="20"
                  placeholder="请输入商品名称"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
  //表单2
 <el-form
          class="form-box"
          ref="ruleForm1"
          :rules="rules"
          :model="data"
        >
         <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="通用名" prop="generic_name">
                <el-input
                  v-model="data.generic_name"
                  maxlength="100"
                  placeholder="请输入通用名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="汉语拼音" prop="pinyin">
                <el-input
                  v-model="data.pinyin"
                  placeholder="请输入汉语拼音"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="药品" prop="main_ingredient" style="">
                <el-input
                  v-model="data.main_ingredient"
                  maxlength="100"
                  placeholder="请输入药品"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
//按钮
  <el-button type="primary" @click="submitForm" class="addBtn"
          >确定</el-button
        >

//多表单进行同时校验
  submitForm(formName: string) {
    console.log(this.data, "新增接口字段");
    const p1 = new Promise<void>((resolve, reject) => {
      const formRef = this.$refs["ruleForm"] as any;
      formRef.validate((valid: boolean) => {
        if (valid) {
          resolve();
        }
      });
    });

    const p2 = new Promise<void>((resolve, reject) => {
      const formRef1 = this.$refs["ruleForm1"] as any;
      formRef1.validate((valid: boolean) => {
        if (valid) {
          resolve();
        }
      });
    });
    Promise.all([p1, p2])
      .then(() => {
        console.log("验证通过,提交表单");
      })
      .catch(() => {
        console.log("未通过");
      });
  }