antdv多重表单校验,可动态新增表单内字段的长度

form: {
  links: {
    aliexpress: [{ value: '' }],
    alibaba: [{ value: '' }]
  }
}

<a-form-model
  ref="form"
  :rules="rules"
  :model="form"
>
  <div class="product-box links">
    <a-form-model-item label="速卖通" required>
      <a-form-model-item v-for="(item, tKey) in form.links.aliexpress"
        :prop="'links.aliexpress.' + tKey + '.value'"
        :key="'aliexpress-' + tKey"
        label=""
        :rules="{
          required: true,
          message: '链接不能为空',
          trigger: 'blur',
        }"
      >
      <a-input v-model="item.value"></a-input>
      <a-button
        type="link"
        block
        @click="add('aliexpress', tKey)"
      >
        <a-icon type="plus-square" />
      </a-button>
    </a-form-model-item>
  </a-form-model-item>
  <a-form-model-item
    label="阿里巴巴"
    required
    :wrapperCol="{ span: 21 }"
  >
    <a-form-model-item
      :prop="'links.alibaba.' + tKey + '.value'" v-for="(item, tKey) in form.links.alibaba"
      :key="'alibaba-' + tKey"
      label=""
      :rules="{
        required: true,
        message: '链接不能为空',
        trigger: 'blur',
      }"
    >
      <a-input v-model="item.value"></a-input>
      <a-button
        type="link"
        block
        @click="add('alibaba', tKey)"
      >
        <a-icon type="plus-square" />
      </a-button>
    </a-form-model-item>
  </a-form-model-item>
</a-form-model>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容