<template>
<a-form @submit="handleOk" :form="form">
<!-- form="form" 必须优先注册 -->
<!-- 客户姓名 -->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户姓名:">
<a-input
v-decorator="[
'name',
// 给表单赋值或拉取表单时,该input对应的key
{rules: [{ required: true, message: '请输入客户名称!' }]}
]"
placeholder="请输入客户名称"
/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户地址:">
<a-input
v-decorator="[
'address',
// 给表单赋值或拉取表单时,该input对应的key
{rules: [{ required: true, message: '请输入客户地址!' }]}
]"
placeholder="请输入客户地址"
/>
</a-form-item>
<a-button @click="Freset">清空表单</a-button>
<a-button @click="Fset">赋值</a-button>
<a-button @click="FsetErr">赋err值</a-button>
<a-button @click="Fget">获取值</a-button>
<a-button @click="Fvalidate">验证</a-button>
</a-form>
</template>
<script>
export default {
name: "TestForm",
data() {
return {
form: this.$form.createForm(this) // 只有这样注册后,才能通过表单拉取数据
};
},
methods: {
Freset() {
this.form.resetFields();
},
Fset() {
this.form.setFieldsValue({
name: "设置值"
});
},
FsetErr() {
const arr = [
{
message: "您输入的格式不正确!",
field: "name"
}
];
this.form.setFields({
name: { value: "错误信息", errors: arr }
});
},
Fget() {
alert(JSON.stringify(this.form.getFieldsValue()));
},
Fvalidate() {
this.form.validateFields((err, values) => {
if (!err) {
alert(JSON.stringify(values));
}
});
}
}
};
</script>