When the el-from form is in v-if, v-show, and self-incrementing and self-decreasing form items, there will be form validation exceptions or abnormal solutions for string items

I. Introduction.

In daily development, forms and form validation are components with a very large usage rate. This article makes a corresponding solution for an exception that is prone to occur during its use.

2. Description.

Here we take the dynamic (self-increment/decrement) form as an example to explain the abnormal situation and handling of the form item verification during its use.

3. Core idea.

Specify a corresponding and unique key attribute for each el-form-item .

4. Main code.

html:

<el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      v-loading="loading"
      class="g-form-drawer-main"
    >
      <template v-for="(item, index) in ruleForm.itemList">
        <el-form-item
          label="运营商："
          :prop="'itemList.' + index + '.carrier'"
          :key="item.key"
          :rules="{
            required: true,
            message: '请选择运营商',
            trigger: ['blur', 'change'],
          }"
        >
          <div class="p-form-content">
            <el-select
              class="w-300 umar-r10"
              v-model="item.carrier"
              placeholder="请选择运营商"
              filterable
              clearable
            >
              <el-option
                v-for="i in comList"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item
          label="计划套餐："
          :prop="'itemList.' + index + '.packageId'"
          :key="item.key"
          :rules="{
            required: true,
            message: '请选择计划套餐',
            trigger: ['blur', 'change'],
          }"
        >
          <div class="p-form-content">
            <el-select
              class="w-300 umar-r10"
              v-model="item.packageId"
              placeholder="请先选择运营商后再选择计划套餐"
              filterable
              clearable
            >
              <el-option
                v-for="i in item.packageList"
                :key="i.packageId"
                :label="i.name"
                :value="i.packageId"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <div class="p-form-content bottom-box">
            <el-input
              type="textarea"
              style="width: 300px"
              v-model="item.scene"
              placeholder="请输入业务类型"
            ></el-input>
            <el-button
              v-show="index === 0"
              class="p-el-button addbtn"
              type="success"
              icon="el-icon-plus"
              circle
              @click="addProcess"
            ></el-button>
            <el-button
              v-show="ruleForm.itemList && ruleForm.itemList.length > 1"
              class="p-el-button delbtn"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delProcess(index)"
            ></el-button>
          </div>
       </template>
     </el-form>
     
     
js：

data() {
    return {
      ruleForm: {
        itemList: [
          {
            carrier: "",
            packageId: "",
            packageList: [], 
            key: Date.now()    //确保唯一性
          },
        ],
      },
      comList: [],
      rules: {},
    };
  },
  methods: {
    //新增
    addProcess() {
      const process = {
        carrier: "",
        packageId: "",
        packageList: [],
        key: Date.now()   //确保唯一性
      };
      this.ruleForm.itemList.unshift(process);
    },
    //删除
    delProcess(index) {
      if (this.ruleForm.itemList && this.ruleForm.itemList.length > 1) {
        this.ruleForm.itemList.splice(index, 1);
      } else {
        this.$message({
          message: "至少需保留一个",
          type: "error",
          showClose: true,
        });
      }
    },  

5. Renderings.

• When the corresponding and unique key is not specified:

• When a unique key is specified:

Six. Experience.

The el-form dynamic form, the official case is to bind each el-form-item with a key value (:key="domain.key"), but there is a problem here that if the key under the domain object does not exist Or it is not unique, then it is easy to cause various overturns in the dynamic form, so the solution is to rewrite the value bound by the key, which must exist and be unique.