今天小编给大家分享一下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.resetFieldsrequired: true 设置必填, trigger: 'blur' 设置失去焦点触发校验
<a-input
v-decorator="['name', { rules: [{ required: true, message: '请输入账号!'}],trigger: 'blur' }]"
/>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) {
}
}<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的取值与赋值问题怎么解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/liao513146936/article/details/122956643
