ant-design-vue 1.x 的 a-form-model怎样设置表单必填项（a-form同样适用）

本文介绍: a-input v-model=”sendForm.template_test_json” placeholder=”请输入json格式测试数据” :rules=”[{ required: true, message: ‘请输入json格式测试数据’ }]”/>

背景

“ant-design-vue”: “1.7.6”
vue2

吐槽

不知道公司为什么非要用蚂蚁金服1.x版本的组件，还是新项目，问题很多bug不少本文记录第一个必填项bug

问题

项目内a-form-model表单某几个属性需要增加必填项

试了以前element-ui的三种方式

1. rules校验规则：失效

代码：

<a-form-model :rules=”rules” layout=”horizontal” ref=”ruleForm” :model=”sendForm” :labelCol=”{ span: 5 }” :wrapperCol=”{ span: 12 }”>

<a-form-model-item label=”发送类型” prop=”template_type”>

<a-radio-group v-model=”sendForm.template_type”>

<a-radio v-for=”(e, index) in templateTypeList” :key=”index” :value=”e.id”>

{{ e.name }}

</a-radio>

</a-radio-group>

</a-form-model-item>

</a-form-model>

data定义：

rules: {

template_type: [{ required: true, message: ‘请选择发送类型’, trigger: ‘blur’ }]

}

2. required直接写死：失效

代码：

<a-form-model-item label=”测试数据” prop=”template_test_json”>

<a-input v-model=”sendForm.template_test_json” placeholder=”请输入json格式测试数据” required/>

</a-form-model-item>

3. vue3实现表单的必填验证：失效，这个是因为蚂蚁金服1.x版本采用vue2

<a-form-model-item label=”测试数据” prop=”template_test_json”>

<a-input v-model=”sendForm.template_test_json” placeholder=”请输入json格式测试数据” :rules=”[{ required: true, message: ‘请输入json格式测试数据’ }]”/>

</a-form-model-item>

解决

设置ref
设置rules规则
在提交数据时，设置必填项验证
如果你是a-form的话需要使用a-form-model代替

<template>
  <a-form-model :rules="rules" layout="horizontal" ref="ruleForm" :model="sendForm" :labelCol="{ span: 5 }" :wrapperCol="{ span: 12 }">
    <a-form-model-item label="测试数据" prop="template_test_json">
      <a-textarea v-model="sendForm.template_test_json" placeholder="请输入json格式测试数据" />
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 14, offset: 5 }">
      <a-button type="primary" @click="onSubmit(sendForm)">提交</a-button>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import { sendMSG } from '@/api/bizmd-server.js'
export default {
  data() {
    return {
      labelCol: { span: 3 },
      wrapperCol: { span: 21 },
      sendForm: {
        template_test_json: ''
      },
      templateTypeList: [],
      rules: {
        template_test_json: [{ required: true, message: '请输入测试数据', trigger: 'blur' }]
      }
    }
  },
  methods: {
    async onSubmit(v) {
      // 验证必填项
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          return false
        } else {
          console.log('this.sendForm', this.sendForm)
          let res = sendMSG(this.sendForm)
        }
      })
    }
  }
}
</script>

至此解决完毕