antd vue中 v-decorator 的理解

v-decorator antd vue的理解

v-decorator是ant Design的控件验证属性

经过 getFieldDecorator 或 v-decroator 包装的控件，表单控件会自动添加 value onChange 或者 trigger ,数据同步由Form接管，这会导致以下结果

你不在需要也不应该用 onChange 同步，但是可以继续监听 onChange事件

你不能用控件的 value defaultValue等属性来设置表单域的值，默认值可以用 getFieldDecorator 或 v-decorator里的 initialValue

你不应该用 v-model 可以使用 this.form.setFieldsValue 来动态改变表单值

定义form：

<template>
  <div class="main">
    <a-form
      id="formLogin"
      class="user-layout-login"
      ref="formLogin"
      :form="form"
      @submit="handleSubmit"
    >
        <a-form-item>
            <a-input
              size="large"
              type="text"
              placeholder="账户: "
              v-decorator="[
                'username',
                {initialValue:'',rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
              ]"
            >
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-form-item>
    </a-form>
 </div>
</template>
 
<script>
...
export default {
  ...
  data () {
    return {
      ...
      form: this.$form.createForm(this),
    }
  },
  created () {
    
  },
  ...
} 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

v-decroator取值

this.form.vaidateFields((err, values) => {
    console.log(values) // {username: ''}
})
1
2
3

v-decroator赋值

this.form.setFieldsValue({
    username: '设置值'
})
1
2
3

清空表单数据

this.form.resetFields()
1