antd vue v-decorator的取值与赋值问题怎么解决

今天小编给大家分享一下antd vue v-decorator的取值与赋值问题怎么解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

antd vue v-decorator的取值与赋值

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

经过 getFieldDecorator 或 v-decorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） 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" : />
            </a-input>
          </a-form-item>
    </a-form>
 </div>
</template>
 
<script>
...
export default {
  ...
  data () {
    return {
      ...
      form: this.$form.createForm(this),
    }
  },
  created () {
    
  },
  ...
}
</script>

v-decorator 取值：

this.form.validateFields((err, values) => {
  // 这里做逻辑处理
  console.log(values) // { username: '' }
})

v-decorator 赋值：

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

清空表单数据：

this.form.resetFields

ant design vue之v-decorator问题

1.在template中直接使用

required: true 设置必填, trigger: 'blur' 设置失去焦点触发校验

<a-input
  v-decorator="['name', { rules: [{ required: true, message: '请输入账号!'}],trigger: 'blur' }]" 
 />

2.在script中设置校验规则

template 部分

 <a-input
   v-decorator="['password', validatorRules.password]"
 />

script 部分

   data(){
    return {
       form: this.$form.createForm(this),
       validatorRules: {
          password : {//name与v-decorator中属性对应
            initialValue: 123456,//初始值
            rules: [
              { required: true, message: '请输入密码!'},//此处开启校验必填
              { min: 5, message: '长度不少于 5 个字符'}, // 长度校验
              { validator: this.validatePassword},//校验规则函数，
            ],
            trigger: 'blur' // 触发方式
          },
        },
    }
  },
   methods: {
      validatePassword(rule, value, callback) {
      
      }
  }

3. 完整代码

<template>
  <div class="login">
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
    <a-form-item label="name">
      <!-- 直接写检验规则 -->
      <a-input
         v-decorator="['name', { rules: [{ required: true, message: '请输入账号!'}],trigger: 'blur' }]" 
      />
    </a-form-item>
    <a-form-item label="password">
      <!-- 在script 里面定义更复杂的检验规则,  -->
      <a-input
        v-decorator="['password', validatorRules.password]"
      />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit">
        Login
      </a-button>
    </a-form-item>
  </a-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data(){
    return {
       form: this.$form.createForm(this),
       validatorRules: {
          password : {//name与v-decorator中属性对应
            initialValue: 123456,//初始值
            rules: [
              { required: true, message: '请输入密码!'},//此处开启校验必填
              { min: 5, message: '长度不少于 5 个字符'}, // 长度校验
              { validator: this.validatePassword},//校验规则函数，
            ],
            trigger: 'blur' // 触发方式
          },
        },
    }
  },
  created(){
    // this.$nextTick(() => {
    //     this.form.setFieldsValue({name:'yyy',password: 123});
    //   })
  },
  mounted(){
    this.form.setFieldsValue({name:'yyy',password: 123});
  },
  methods: {
     handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    validatePassword(rule, value, callback) {
      
    }
  }
}
</script>

注意：

确保使用 this.form.setFieldsValue({name:'yyy',password: 123}) 设置值

或者 this.form.validateFields((err, values) => { }); 获取值

之前

已经 this.$form.createForm(this)

如果在钩子函数里面使用 setFieldsValue 报类似错误

warning.js?d96e:34 Warning: You cannot set a form field before rendering a field associated with the value. You can use `getFieldDecorator(id, options)` instead `v-decorator="[id, options]"` to register it before render.

可以这样试下

this.$nextTick(() => {
  this.form.setFieldsValue({name:'yyy',password: 123});
})

以上就是“antd vue v-decorator的取值与赋值问题怎么解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。