antd 如何为表单插入一个属性

之前一直习惯于用element ui，用了antd ui框架后觉得在使用的时候着实没有element ui好用，记录下用antd表单时遇到的问题

接下来，熟悉下它的写法

1、data中表单的创建方式写法，是下面这种方式

 data() {
    return {
      form: this.$form.createForm(this), //antd创建表单
      }
    }

2、同时页面结构绑定的写法与element ui也不一样，这里需要注意的是他的绑定方式，element ui用的是v-model绑定表单值的写法,它的写法是v-decorator,而add.loginname是绑定在另一个文件的校验名称，同时也是绑定的他的值，这里的名称建议与要传递给后台接口文档的名称保持一致比较好

  <a-form class="has-pd20" :form="form" @submit="handle">
              <a-row :gutter="8">
                <a-col :span="24">
                  <a-form-item
                    label="账号"
                    :label-col="formItemLayout.labelCol"
                    :wrapper-col="formItemLayout.wrapperCol">
                    <a-input
                      @blur="accountBlur(2)"
                      v-decorator="add.loginName"
                      placeholder="请输入账号"/>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item
                    label="密码"
                    :label-col="formItemLayout.labelCol"
                    :wrapper-col="formItemLayout.wrapperCol">
                    <a-input-password
                      v-decorator="add.password"
                      placeholder="请输入密码">
                    </a-input-password>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>

3、在当前文件中引入了校验方式

import validate from './validate'
import rules from '@/common/utils/rules'

let validate = {
  // 新增业字段
  add: {
    loginName: [
      'loginName',
      {
        rules: [
          {
            required: true,
            message: '请输入账号'
          },
          {
            pattern: /^[\u4E00-\u9FA5\uF900-\uFA2D\w]{1,50}$/,
            message: '请输入1-50个字符，推荐使用汉字、数字、大小写字母'
          }
        ]
      }
    ]
   }
}
// 遍历所有的检验字段,检查每个字段的option,为每个option添加公用的规则
for (let key in validate) {
  for (let k in validate[key]) {
    validate[key][k][1] = rules.addNormalize(validate[key][k][1])
  }
}

export default {
  data() {
    return validate
  }
}

4、提交表单需要将form对象传递给后台，有时候是接口文档是需要再加一些其他的参数，不仅仅是光model绑定的字段

比如我这里form表单里绑定了loginName和password，传递给后台的时候需要再加一个参数roleType,这里用到
了getFieldDecorator这个API，给表单插入一个属性，然后为这个属性设置值用到了setFieldsValue这个Api，
再

 <a-button type="primary" @click="handle">提交</a-button>
<script>
   handle(e) {
      e && e.preventDefault()
      // ---------------------给表单中插入一个属性
      this.form.getFieldDecorator('roleType', { roleType: null })

      //------------------ 给表单中的属性，设置属性值
      this.form.setFieldsValue({
        roleType: 2
      })
      this.form.validateFields((err, values) => {
      //------------这个values就可以看到自己要传递的表单对象，包含了3个值也就是下面的这个对象了
     // form{
     // loginName:'XXX',
     // password:'XXX',
     // roleType:2
     // }
      console.log(values)
        if (!err) {
          values.password = this.$encryption.Encrypt(values.password)
          this.$axios.post('/partner/register', values).then((res) => {
            if (res.flag) {
              this.$message.success('注册成功')
              this.gologin('2')
            } else {
              this.$message.warning(res.errMsg)
            }
          })
        }
      })
    },
</script>

以往用element ui的表单，需要给表单增加值、改值或取值，都是用this.form.XXX就可以取他某个值，很方便，但antd如果需要打印某个值，则需要用到他的getFieldsValue 这个Api

this.form.getFieldsValue().loginName

antd比起elementui确实不是非常的灵活，更适合react的项目，我也在努力学着怎么使用它！