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" :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>
v-decorator 取值:
this.form.validateFields((err, values) => {
// 这里做逻辑处理
console.log(values) // { username: '' }
})
v-decorator 赋值:
this.form.setFieldsValue({
username: '设置值'
})
清空表单数据:
this.form.resetFields
原文链接:https://blog.csdn.net/liao513146936/article/details/122956643