ant design vue的form表单如何取值

本篇内容介绍了“ant design Vue的fORM表单如何取值”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

ant design vue的form表单取值

官方中有以下两种取值方式

 因为不是很熟悉，所以还是查了文档找了一下使用方式，刚开始查到的文档是这样写的

 然后返回了undefined，后来又查询了一些文档，发现我多加了一个props属性，然后使用第二个方法成功了，代码如下：

ant design of vue 学习之表单form

v-decorator（表单验证，内置绑定，初始值）

可通过 v-decorator 进行表单验证

//内置验证规则<a-form-item label="课程名称"             v-bind="formItemLayout">   <a-input placeholder="课程名称"            v-decorator="['name', { rules: [{ required: true, max: 50, message: '必填项，最大50字符' }] }]" /></a-form-item>//自定义验证规则01<a-form-item>  <a-input size="large"           type="text"           placeholder="手机号"           v-decorator="['mobileNumber',            {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]">    <a-icon slot="prefix"            type="mobile"            : />  </a-input></a-form-item>//自定义验证规则02<a-form-item   v-bind="formItemLayout"               label="手机号码">     <a-input placeholder="手机号码"              v-decorator="['mobileNumber',{rules: [{ required: true,max:11,message:'请输入正确格式的手机号码',validator:MobileNumberValidator}]}]" /></a-form-item>

//在methods中设定方法// 手机号验证MobileNumberValidator (rule, value, callback) {  const idcardReg = /^1(3|4|5|6|7|8|9)\d{9}$/  if (!idcardReg.test(value)) {    // eslint-disable-next-line standard/no-callback-literal    callback('非法格式')  }  // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应  callback()}

可通过 v-decorator 进行内置的双向绑定（详情可看下文的数据获取与填充）

数据填充（所有项）   this.form.setFieldsValue(data)数据获取（所有项）   this.form.validateFields(async (errors, values) => {                          console.log(values)                    });

可通过 v-decorator 的initialValue设置初始值

<a-form-item label="课程名称"             v-bind="formItemLayout">   <a-input placeholder="课程名称"            v-decorator="['name', { initialValue:'姚峰', rules: [{ required: true, max: 50, message: '必填项，最大50字符' }] }]" /></a-form-item>

下拉选择框的 labelInValue 属性

通常情况下，通过this.form.getFieldValue(“courseTeacherList”)，你只能获取一个数组包含value值，形如[‘7’,‘10’]，而通过labelInValue属性可以得到[{key: “7”,label: “王凤”},{{key: “10”,label: “姚峰”}}]

• key表示value

• label表示显示值

<a-form-item label="教师"             v-bind="formItemLayout">  <a-select mode="multiple"  labelInValue            placeholder="请选择教师"            v-decorator="['courseTeacherList', { rules: [{ required: true, message: '必填项，请选择教师' }] }]"><a-select-option v-for="item in teacherList"                 :key="item.id"                 :value="item.id">{{ item.name }}</a-select-option>  </a-select></a-form-item>

type类型检验

Type    string: Must be of type string. This is the default type.    number: Must be of type number.    boolean: Must be of type boolean.    method: Must be of type function.    regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.    integer: Must be of type number and an integer.    float: Must be of type number and a floating point number.    array: Must be an array as determined by Array.isArray.    object: Must be of type object and not Array.isArray.    enum: Value must exist in the enum.    date: Value must be valid as determined by Date    url: Must be of type url.    hex: Must be of type hex.    email: Must be of type email.    any: Can be any type.

数据获取与填充

//获取一个输入控件的值  Function(fieldName: string)let myDate = this.form.getFieldValue("startDate");//获取一组输入控件的值，如不传入参数，则获取全部组件的值   Function([fieldNames: string[]])let value = this.form.getFieldsValue(["startDate","endDate"]);let value = this.form.getFieldsValue();//设置一组输入控件的值this.form.setFieldsValue({startDate:res.result["startDate"],endDate:res.result["endDate"],})//设置一组输入控件的值  加了labelInValue属性this.form.setFieldsValue({userName:{label:res.result["userName"],key:res.result["userNameId"]}})//设置表单数据  对日期、下拉框含labelInValue属性的form控件的数据设置要特殊处理才能绑定//对于日期控件需要将string类型的数据转换moment类型//对于下拉框含labelInValue属性控件，数据需要转换成key、label的对象格式import moment from 'moment'setFormValues (record) {  // 控制教师   if (courseTeacherList && courseTeacherList.length > 0) {     record['courseTeacherList'] = courseTeacherList.map(item => ({       key: item.teacherId + '',       label: item.teacherName     }))   }  const fields = ['courseTeacherList', 'certificateNo', 'cardTime', 'termValidity', 'documentStatus', 'remark']  Object.keys(record).forEach((key) => {    if (fields.indexOf(key) !== -1) {      this.form.getFieldDecorator(key)      const obj = {}      if (key === 'cardTime' && record['cardTime'] != undefined) {        obj[key] = moment(data[key], 'YYYY-MM-DD')      } else {        obj[key] = record[key]      }      this.form.setFieldsValue(obj)    }  })},//关闭表单清空表单数据this.form.resetFields();//提交表单获取数据//通过this.form.validateFields函数进行表单验证以及数据获取//对于日期控件，获取的是moment类型数据，需要转换成字符串储存，//形如values.birthday = values.birthday ? values.birthday.format('YYYY-MM-DD') : ''handleSubmit () {  const { id } = this  this.form.validateFields((err, values) => {    if (!err) {      this.submitLoading = true      values.birthday = values.birthday ? values.birthday.format('YYYY-MM-DD') : ''      // 处理教师      values.courseTeacherList = values.courseTeacherList.map(item => {        const obj = {}        obj.teacherId = Number(item.key)        return obj      })      if (id) {        // 修改        updateCourse({ id, ...values }).then(res => {          if (res.code == 0) {            this.$message.success('保存成功')            this.form.resetFields()            this.$router.back()          } else {            this.$message.error('保存失败，请稍后再试')          }        }).finally(() => {          this.submitLoading = false        })      } else {        // 添加        addCourse(values).then(res => {          if (res.code == 0) {            this.$message.success('保存成功')            this.form.resetFields()            this.$router.back()            } else {            this.$message.error('保存失败，请稍后再试')          }        }).finally(() => {          this.submitLoading = false        })      }    }  })},

表单实例

<template>  <div>    <a-card>      <a-form :form="form">      <!-- 文本框 -->        <a-form-item label="课程名称"                     v-bind="formItemLayout">          <a-input placeholder="课程名称"                   v-decorator="['name', { rules: [{ required: true, max: 50, message: '必填项，最大50字符' }] }]" />        </a-form-item>        <a-form-item label="教师"                     v-bind="formItemLayout">          <a-select mode="multiple"                    labelInValue                    placeholder="请选择教师"                    v-decorator="['courseTeacherList', { rules: [{ required: true, message: '必填项，请选择教师' }] }]">            <a-select-option v-for="item in teacherList"                             :key="item.id"                             :value="item.id">{{ item.name }}</a-select-option>          </a-select>        </a-form-item>        <!-- 文本域 -->        <a-form-item label="课程简介"                     v-bind="formItemLayout">          <a-textarea placeholder="课程简介"                      :autosize="{ minRows: 6, maxRows: 10 }"                      v-decorator="['introduction', { rules: [{ required: true, max: 1000, message: '必填项，最大1000字符' }] }]" />        </a-form-item>        <!-- 步进器 -->        <a-form-item label="时长"                     v-bind="formItemLayout">          <a-input-number v-decorator="['timeLength',{initialValue:60,rules:[{required:true,message:'必填'}]}]"          :min="1"                          :max="100"                          :precision="0" />        </a-form-item>        <!-- 日期控件 -->        <a-form-item label="开课日期"                     v-bind="formItemLayout">          <a-date-picker v-decorator="['startDate', { rules: [{ type: 'object', required: true, message: '请选择开课日期' }] }]"                         format="YYYY-MM-DD" />        </a-form-item>        <!-- 开关滑块 -->        <a-form-item label="在线课程"                     v-bind="formItemLayout">          <a-switch checkedChildren="是"                    unCheckedChildren="否"                     v-decorator="['online', { valuePropName: 'checked', initialValue: true }]" />        </a-form-item>        <!-- 单选框 -->        <a-form-item label="是否发布"                     v-bind="formItemLayout">          <a-radio-group name="radioGroup"           v-decorator="['publish', { initialValue: 1 }]">            <a-radio :value="1">发布</a-radio>            <a-radio :value="0">不发布</a-radio>          </a-radio-group>        </a-form-item>      </a-form>      <a-row>        <a-col :span="14"               :offset="5"               >          <a-button :loading="submitLoading"                              type="primary"                    @click="handleSubmit">保存</a-button>          <a-button                     @click="back">返回</a-button>        </a-col>       </a-row>    </a-card>  </div></template>

import moment from 'moment'import { addCourse, getTeacherList, getCourseById, updateCourse } from '@/api/learning/course'export default {  data () {    return {      submitLoading: false,      form: this.$form.createForm(this),      formItemLayout: {        labelCol: {          lg: { span: 7 },          sm: { span: 7 }        },        wrapperCol: {          lg: { span: 10 },          sm: { span: 17 }        }      },      teacherList: [],      unitSn: ''    }  },  created () {    // 获取教师列表    this.getTeacherList()    // 获取详情    if (this.id) {      this.getInfo()    }  },  computed: {    id () {      return this.$route.query.id    }  },  methods: {    // 获取教师列表    getTeacherList () {      const unitSn = this.unitSn || this.$store.getters.userInfo.unitSn      const params = {        current: 1,        size: -1,        unitSn      }      getTeacherList(params).then(res => {        if (res.code == 0) {          if (res.data.records.length > 0) {            this.teacherList = res.data.records.map(item => {              const obj = {}              obj.id = item.id + ''              obj.name = item.name              return obj            })          }        } else {          this.$message.error(res.message)        }      })    },    // 获取详情 设置表单数据    getInfo () {      let { id } = this      id = Number(id)      getCourseById(id).then(res => {        if (res.code == 0) {          this.setFormValues({ ...res.data })        } else {          this.$message.error(res.message)        }      })    },    // 设置表单数据    setFormValues (record) {      const { courseTeacherList, unitSn } = record      this.unitSn = unitSn      // 控制教师      if (courseTeacherList && courseTeacherList.length > 0) {        record['courseTeacherList'] = courseTeacherList.map(item => ({          key: item.teacherId + '',          label: item.teacherName        }))      }      const fields = ['name', 'courseTeacherList', 'introduction', 'timeLength', 'startDate', 'online', 'publish']      Object.keys(record).forEach(key => {        if (fields.indexOf(key) !== -1) {          this.form.getFieldDecorator(key)          const obj = {}          if (key === 'startDate' && record['startDate'] != undefined) {            obj[key] = moment(record[key], 'YYYY-MM-DD')          } else {            obj[key] = record[key]          }          this.form.setFieldsValue(obj)        }      })    },    // 保存    handleSubmit () {      this.form.validateFields((err, values) => {        if (!err) {          const { id } = this          this.submitLoading = true          // 处理教师          values.courseTeacherList = values.courseTeacherList.map(item => {            const obj = {}            obj.teacherId = Number(item.key)            return obj          })          // 处理日期          values.startDate = values.startDate ? values.startDate.format('YYYY-MM-DD') : ''          if (id) {            // 修改            updateCourse({ id, ...values }).then(res => {              if (res.code == 0) {                this.$message.success('保存成功')                this.form.resetFields()                this.$router.back()              } else {                this.$message.error('保存失败，请稍后再试')              }            }).finally(() => {              this.submitLoading = false            })          } else {            // 添加            addCourse(values).then(res => {              if (res.code == 0) {                this.$message.success('保存成功')                this.form.resetFields()                this.$router.back()              } else {                this.$message.error('保存失败，请稍后再试')              }            }).finally(() => {              this.submitLoading = false            })          }        }      })    },    // 返回    back () {      this.$confirm({        title: '还未保存，是否返回上一级？',        okText: '确认返回',        cancelText: '取消',        onOk: () => {          this.$router.back()        }      })    }  }}</script><style lang="less" scoped></style>

“ant design vue的form表单如何取值”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！