关于AntDesign Vue中向form表单中通过getFieldDecorator()追加字段，经过form.validateFields()校验后追加的字段消失的问题

本文链接：https://blog.csdn.net/qq_44839652/article/details/120130330

问题描述

当我们书写了这样的一段Ant Design Vue的form表单HTML代码：

<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
	<a-form-item label="用户名" hasFeedback>
	  <a-input v-decorator="['lang', {
	  		   		rules: [
               			{ required: true, message: '请选择要录入的语言' }], },]"
               placeholder="请输入用户名"/>
	</a-form-item>
	<a-form-item label="年龄" hasFeedback>
	  <a-input v-decorator="['age']" placeholder="请输入年龄"/>
	</a-form-item>
</a-form>

然后我们书写了如下的脚本（伪代码），向form表单中追加一些可能会需要的元素，例如userId：

this.form.getFieldDecorator('userId', { initialValue: 'testUserId' })

然后我们又调用了form表单所提供的validateFields()方法去校验表单数据，让其校验表单的输入是否符合规则，并且发送ajax请求：

this.form.validateFields((errors, values) => {
    if (!errors) {
    	// 假装发个ajax
      sendSomeAjax(values).then(res => {
        if (res.success && res.data !== null) {
          this.$message.success('成功')
        } else {
          this.$message.error('失败：' + res.message)
        }
      })
    } else {
      this.$message.error('失败：表单校验不通过')
    }
})

按照官方文档的说明，这里的values就是表单每个键值对的集合对象，但是事与愿违，这里的values将不会带有我们后追加的userId属性，将values输出可以看到：

{ username: xxx, age: yyy }

问题原因

于是我重新去查阅他文档的说明，发现有两个特别重要的关键字：
在这里插入图片描述
问题就出现在这里，他校验的是输入域的值，并且校验完成后会直接将我们后追加上去的字段直接从form里头抹去，也就是此时无论你找values变量、还是通过this.form.getFieldsValue()去获取当前表单的所有数据，你都将找不到我们后追加上去的字段userId了！

我的解决方案

知道了原因，那么我们就可以这样来做，在校验之前先把表单的数据存起来一份，校验通过后用我们存好的数据去发ajax就可以了，修改代码如下：

// validateFields方法只会校验输入控件的值，会将表单一些后追加的选项给过滤掉，因此提前在外边接住！！！
const tempData = this.form.getFieldsValue()

this.form.validateFields((errors, values) => {
    if (!errors) {
    	// 假装发个ajax，数据用我们校验前存的
      sendSomeAjax(tempData).then(res => {
        if (res.success && res.data !== null) {
          this.$message.success('成功')
        } else {
          this.$message.error('失败：' + res.message)
        }
      })
    } else {
      this.$message.error('失败：表单校验不通过')
    }
})