一、Form表单
1. 表单创建
在创建表单时注意在 a-form 组件中添加 :form="form" 属性。
此外需要在 data 中对表单进行注册：form: this.$form.createForm(this)。
<template>
<a-form :form="form">
<!-- content -->
</a-form>
</template>
<script>
export default {
data() {
return {
// 必须在此进行注册
form: this.$form.createForm(this)
}
}
}
</script>
2. 表单数据
在使用 a-form 表单，当进行数据绑定时，并不建议使用 v-model ，Antd 提供 v-decorator 进行代替，同时更方便配置规则。
</a-form-item>
<a-input
placeholder="请输入账号"
v-decorator="[
'account',
{ rules: [{ required: true, message: '账号不能为空!' }] }
]"
/>
</a-form-item>
通过 v-decorator 属性参数将输入以对象的形式绑定到 validateFields 方法的 value 中。这里的 error 表示验证输入是否符合我们 v-decorator 中配置的规则。
this.form.validateFields((errors, values) => {
if (!errors) {
// 打印对象值
console.log(values
}
})
3. 表单值
因为 v-decorator 是单向绑定，所以当需要给组件赋值时需要我们手动操作。
this.form.setFieldsValue({
account: 'Alex',
password: '123456'
})
我们也可以对手动获取表单的值，需要注意这里要加 async await 两个关键字。
method: {
async getValue () {
const values = await this.form.validateFields()
console.log(values)
}
}
二、Model表单
在了解了 a-form 控件使用之后想必你也发现了一个问题，因为其并不支持值双向绑定，当面对大量的数据时手动赋值显然时极其繁杂的。因此 Antd 提供了另一控件： a-form-model ，从控件名字即可看出其支持 v-model 双向绑定，下面就介绍其基本使用。
1. 控件使用
在 a-form-model 标签添加 :model 实现整个表单对象值绑定，在其子输入标签中与普通双向值绑定一样使用 v-model 进行单项数据绑定。
<template>
<div>
<a-form-model
:model="formData"
>
<a-form-model-item
label="姓名"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-input
v-model="formData.userName"
placeholder="请输入联系人"
/>
</a-form-model-item>
<a-form-model-item
label="电话"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-input
v-model="formData.telephone"
placeholder="请输入联系方式"
/>
</a-form-model-item>
</a-form-model>
</div>
</template>
<script>
export default {
name: 'formDemo',
data () {
return {
formData: {
userName: '',
telephone: '',
comment: ''
}
// 控制 a-form-model-item 文字布局
labelCol: {
xs: { span: 24 },
sm: { span: 7 }
},
// 控制 a-form-model-item 文字布局
wrapperCol: {
xs: { span: 24 },
sm: { span: 13 }
}
}
}
}
</script>
2. 表单规则
model 表单针对规则验证提供一种更为简单的方式，通过 rule 属性即可实现字段验证。
这里说明一下规则中
trigger属性区别：
- blur: 当光标从控件上移走则激活验证，常用于
input等输入性组件。- changge: 当值发生变化时激活验证，常用于
date-picker等选择性组件。
<template>
<div>
<a-form-model
ref="modelForm"
:rules="rules"
:model="formData"
>
<a-form-model-item
label="联系人"
prop="userName"
>
<a-input
v-model="formData.userName"
placeholder="请输入联系人"
/>
</a-form-model-item>
</a-form-model>
</div>
</template>
<script>
export default {
data () {
return {
rules: {
// 属性名和 form-item 的 prop 一致
userName: [
{ required: true, message: '请输入联系人', trigger: 'blur' }
],
telephone: [
{ required: true, message: '请输入联系方式', trigger: 'blur' }
]
}
}
}
}
</script>
3. 表单方法
针对配置的表单字段规则，Antd 提供一系列验证方法，下面分别进行介绍。
(1) 规则认证
通过 validate 方法即可验证表单所有字段是否符合设置的规则，并通过红标激活相应的组件。
methods: {
ok () {
this.$refs.modelForm.validate(valid => {
if (valid) {
this.$message.success('规则验证成功')
} else {
this.$message.error('规则验证失败')
}
})
}
}
(2) 单字段认证
通过上述的方法可以实现整个表单的规则验证，但有时间只需要对配置的某个字段进行单独验证，我们则可通过 validateField 实现该需。
需要注意 validateField 返回 valid 并非布尔类型，而是对应字段规则中配置的 message 。
methods: {
ok () {
// 单独验证 userName 字段
this.$refs.modelForm.validateField('userName', valid => {
if (valid === '') {
this.$message.success('规则验证成功')
} else {
this.$message.error('规则验证失败')
}
})
}
}
(3) 表单清除
在激活表单认证规则之后如果没有进行清除，那么重新打开页面字段规则的红色提示将仍然存在，因此在取消或者退出页面之后应收手动进行清除。
methods: {
cancel () {
// 清除表单值与认证规则
this.$refs.modelForm.resetFields()
}
}
