Antdv Form forms dynamically add and validate forms

HTML part

 <a-form-model
  ref="form"
  :model="params"
  :label-col="{ span: 2, sm: { span: 2 } }"
  labelAlign="left"
>
  <a-form-model-item label="Activity Name">
    <a-input style="width:500px" v-model="params.geekName" />
  </a-form-model-item>
  <a-form-model-item label="Reward Settings">
    <div v-for="(item, index) in params.geekGeekRuleVoList" :key="index">
      <a-row>
        <a-col :span="1" :style="{ 'margin-left': index ! = = 0? '8.4%' : ' '}">
          <span>{{item.orderNumName}} name</span>
        </a-col>
        <a-col :span="3">
          <! -- Prize type -->
          <a-form-model-item
            :prop="'geekGeekRuleVoList.' + index + '.prizeType'"
            :rules="[{required: true, message: 'cannot be null ', trigger: 'change'}]"
          >
            <a-select
              v-model="item.prizeType"
            >
              <a-select-option value="1">cash</a-select-option>
              <a-select-option value="2">goods</a-select-option>
              <a-select-option value="3">vouchers</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <! -- Cash amount -->
        <a-col :span="3" v-if="item.prizeType == 1">
          <a-form-model-item
            :prop="'geekGeekRuleVoList.' + index + '.prizeAmount'"
            :rules="{required: true, message: 'cannot be empty ', trigger: 'blur',}"
          >
            <a-input
              v-model.trim="item.prizeAmount"
              class=""
              placeholder="Please enter"
            ></a-input>
          </a-form-model-item>
        </a-col>
        <! -- Certificate or commodity name -->
        <a-col :span="4" v-if="item.prizeType == 2 || item.prizeType == 3">
          <a-form-model-item
            :prop="'geekGeekRuleVoList.' + index + '.prizeName'"
            :rules="{required: true, Max: 5, message: 'Length cannot be greater than 5', trigger: 'blur',}"
          >
            <a-input
              v-model="item.prizeName"
              class=""
              placeholder="A maximum of 5 characters can be entered."
            ></a-input>
          </a-form-model-item>
        </a-col>
        <! -- Select goods or coupons -->
        <a-col :span="5" v-if="item.prizeType == 2">
          <a-form-model-item
            :prop="'geekGeekRuleVoList.' + index + '.prizeId'"
            :rules="{required: true, message: 'cannot be null ', trigger: 'change',}"
          >
            <a-select
              show-search
              class=""
              v-model="item.prizeId"
              placeholder="Select goods"
              :filterOption="filterOption"
            >
              <a-select-option
                v-for="(item, index) in goodsListData"
                :value="item.id"
                :key="index"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="5" v-if="item.prizeType == 3">
          <a-form-model-item
            :prop="'geekGeekRuleVoList.' + index + '.prizeId'"
            :rules="{required: true, message: 'cannot be null ', trigger: 'change',}"
          >
            <a-select
              show-search
              class=""
              v-model="item.prizeId"
              placeholder="Choice ticket"
              :filterOption="filterOption"
            >
              <a-select-option
                v-for="(item, index) in templateData"
                :value="item.id"
                :key="index"
              >
                {{ item.title }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-button type="danger" style="margin-left:10px" @click="onRemove(index)">
            <a-icon type="minus-circle-o" />
          </a-button>
        </a-col>
      </a-row>
    </div>
  </a-form-model-item>
  <div style="margin-bottom: 10px;">
    <a-button style="width:80px" type="primary" @click="onAdd">
      <a-icon type="plus" />
    </a-button>
  </div>
  <a-form-model-item label="Reward description">
    <a-input
      style="width:500px"
      :auto-size="{ minRows: 3, maxRows: 5 }"
      v-model="params.ruleSet"
      type="textarea"
    />
  </a-form-model-item>
  <a-form-model-item label="Activity Specification">
    <a-input
      style="width:500px"
      :auto-size="{ minRows: 3, maxRows: 5 }"
      v-model="params.ruleSetDesc"
      type="textarea"
    />
  </a-form-model-item>
  <a-form-model-item label="Activity Time:">
    <a-range-picker
      v-model="timeData"
      :show-time="{ format: 'YYYY-MM-DD' }"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      :placeholder=[' start time ', 'end time ']
      @change="onChange"
      :disabledDate="disabledDate"
      @ok="onOk"
    />
  </a-form-model-item>
  <a-button type="primary" html-type="submit" @click="submitForm">submit</a-button>
</a-form-model>
Copy the code

Js part

export default {
    name: 'detailsComp'.data() {
        return {
          params: {
            geekName: ' '.ruleSet: ' '.ruleSetDesc: ' '.geekBeginDate: ' '.geekEndDate: ' '.geekType: null.geekGeekRuleVoList: [{orderNumName: '一'./ / place
                orderNum: '1'.prizeType: ' './/1= cash, 2= physical, 3= coupons
                prizeAmount: ' '.// Cash amount
                prizeName: ' '.// The name of the reward item
                prizeNum: '1'./ / the number of
                prizeId: ' './ / item id},],},timeData: null}; }},methods: {onAdd() {
      this.params.geekGeekRuleVoList.push({
        orderNumName: ' './ / place
        orderNum: ' '.prizeType: ' './/1= cash, 2= physical, 3= coupons
        prizeAmount: ' '.// Cash amount
        prizeName: ' '.// The name of the reward item
        prizeNum: '1'./ / the number of
        prizeId: ' './ / item id
      });
    },
    onRemove(index) {
      if (index == 0) {
        this.$message.error('Can't delete the first one! ');
        return false;
      }
      this.params.geekGeekRuleVoList.splice(index, 1);
    },
      submitForm(formName) {
          this.$refs['form'].validate((valid) = > {
            if (valid) {
              this.$emit('submitBtn'.this.params);
            } else {
              console.log('error submit!! ');
              return false; }}); }},Copy the code