Ant Design Vue-Form 学习 --持续更新
Ant Design Vue
Form 表单
表单填写在日常工作中收录信息比较常用，
antd 中 form 用于创建一个实体收集信息，并且可以对输入的数据类型进行校验。
1. 表单排列
这里指的是 表单的标签和控件的排列方式
- 水平
- 垂直
- 行内
2. 表单域
表单·一定会·包含表单域， 表单域 可以是
- 输入控件
- 标签
- 下拉菜单
- 文本域等等
antd 封装了表单域<Form.item />
注意点
1、如果使用 Form.create 处理表单使其具有自动收集数据并校验的功能，建议使用jsx。<.jsx>https://typescript.bootcss.com/jsx.html
- 我不熟悉jsx语法，所以使用 template 方式使用form
2、如果不是使用Vue.use(Form)形式注册的Form组件，你需要自行在main.js文件中将$form挂载到Vue原型上。Vue.prototype.$form = Form
3. 使用
<template>
<a-form :form="form">
<a-form-item label="Note">
<a-input
v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
>
</a-form-item>
</a-form>
</template>
4.apis 释义
Form
1. :form=“form”
动态数据绑定，这个没啥说的，但是这里需要注意的data中的form的创建形式
- 直接指定一个
Object对象{} - 使用Form.create来创建
jsx方式 自己不熟悉，不用- template 方式使用。
我们先来说第二种，官方用的最多,上代码
///.....vue 实例
data() {
return {
form: this.$form.createForm(this, { name: 'coordinated' }),
};
},
//...
- form -官方文档
form经Form.create()包装过的组件会自带this.form属性，如果使用template语法，可以使用this.$form.createForm(this, options)类型是object默认参数 无
- form -我的理解
-
data中的form 是一个经过antd(
$form.create)方法包装过的属性 -
参数中的this 是 组件实例本身 与 其他配置中的
this一样使用- Form.create(options) | this.$form.createForm(this, options)
<template> <a-form :form="form" /> </template> <script> export default { beforeCreate() { this.form = this.$form.createForm(this, options); }, }; </script>
- Form.create(options) | this.$form.createForm(this, options) --> options api 理解
参数 options
- options: 只记录与 template 用法相关
name—设置表单域内字段id的前缀validateMessages默认校验信息，可用于把默认错误信息改为中文等，格式与newMessages返回值一致Object { [nested.path]: String }onValuesChange任一表单域的值发生改变时的回调(props, values) => void
- Form.create this.form 的apis
经过 Form.create 包装的组件将会自带 this.form 属性，this.form 提供的 API 如下：
注意：使用
getFieldsValue,getFieldValue,setFieldsValue等时，应确保对应的field已经用getFieldDecorator或 v-decorator注册过了。如下：
<a-input
v-decorator="[‘note’, { rules: [{ required: true, message: ‘Please input your note!’ }] }]"
>
1.getFieldDecorator 用于和表单进行双向绑定，单文件 template 可以使用指令v-decorator进行绑定，详见下方描述
this.form.getFieldDecorator(id, options)和v-decorator="[id, options]"
经过getFieldDecorator或v-decorator包装的控件，表单控件会自动添加value（或valuePropName指定的其他属性）onChange（或trigger指定的其他属性），数据同步将被Form接管，这会导致以下结果：-
你不再需要也不应该用
onChange来做同步，但还是可以继续监听onChange等事件。 -
你不能用控件的
valuedefaultValue等属性来设置表单域的值，默认值可以用getFieldDecorator或v-decorator里的initialValue。 -
你不应该用
v-model，可以使用this.form.setFieldsValue来动态改变表单值。
-
this.form.getFieldDecorator(id, options) //通过装饰id 此组件就是form.create装饰过的了
v-decorator="[id, options]"
-
参数解释
-
id,必填！！！输入控件的唯一标志，支持嵌套式的写法？是不是 html 标签中 id 就可以作为唯一标志？？>>测试！！options.getValueFromEvent可以把onChange的参数（如event）转化为控件的值- 不再使用
onChange作为同步方法，使用此配置项配置方法
- 不再使用
options.initialValue子节点的初始值，类型、可选值均由子节点决定- (注意：由于内部校验时使用 === 判断是否变化，建议使用变量缓存所需设置的值,而非直接使用字面量)
- eg:
{initialValue:value}value 是data中的变量或者父组件的变量
options.normalize转换默认的 value 给控件
<template> <a-form :autoFormCreate=" (form) => { this.form = form; } " > <a-form-item fieldDecoratorId="fruits" :fieldDecoratorOptions="{ normalize: this.normalizeAll }" > <a-checkbox-group :options="options" /> </a-form-item> </a-form> </template> <script> export default { data() { return { options: [ { label: "All", value: "All" }, { label: "Apple", value: "Apple" }, { label: "Pear", value: "Pear" }, { label: "Orange", value: "Orange" }, ], }; }, methods: { normalizeAll(value, prevValue = [], allValues) { console.log(allValues); if (value.indexOf("All") >= 0 && prevValue.indexOf("All") < 0) { return ["All", "Apple", "Pear", "Orange"]; } if (value.indexOf("All") < 0 && prevValue.indexOf("All") >= 0) { return []; } return value; }, }, }; </script>-
options.preserve即便字段不再使用，也保留该字段的值 -
options.rules校验规则，参考下方:参数 说明 类型 默认值 enum 枚举类型 string - message 校验文案 string - min 最小长度 number - pattern 正则表达式校验 RegExp - required 是否必选 boolean false transform 校验前转换字段值 function ( value) => transformedValue:any - len 字段长度 number - max 最大长度 number - type 内建校验类型，可选项 string ‘string’ validator 自定义校验（注意，callback 必须被调用） function (rule, value, callback) whitespace 必选时，空格是否会被视为错误 boolean false -
options.trigger收集子节点的值的时机 触发的方法 类型string默认值'change' -
options.validateFirst当某一规则校验不通过时，是否停止剩下的规则的校验 类型boolean默认值false -
options.validateTrigger校验子节点值的时机 验证子节点时触发的方法 类型string|string[]默认值'change' -
options.valuePropName子节点的值的属性，如Switch的是'checked'类型string默认值'value'- 有的组件的值并不是通过
value获取的，需要另外提供 <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
- 有的组件的值并不是通过
2. getFieldError 获取某个输入控件的 Error 类型：-Function(name)
3. getFieldsError 获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error 类型：-Function([names: string[]])
4. getFieldsValue 获取一组输入控件的值，如不传入参数，则获取全部组件的值 类型：-Function([fieldNames: string[]])
5. getFieldValue 获取一个输入控件的值 类型：-Function(fieldName: string)
6. isFieldsTouched 判断是否任一输入控件经历过 getFieldDecorator 或 v-decorator 的值收集时机 options.trigger 类型：(names?: string[]) => boolean
7. isFieldTouched 判断一个输入控件是否经历过 getFieldDecorator 或 v-decorator 的值收集时机 options.trigger 类型：(name: string) => boolean
8. isFieldValidating 判断一个输入控件是否在校验状态 类型：-Function(name)
9. resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 类型：-Function([names: string[]])
10. setFields 设置一组输入控件的值与错误状态。 类型：-Function({ [fieldName]: { value: any, errors: [Error] } })
11. setFieldsValue 设置一组输入控件的值类型：-Function({ [fieldName]: value })
12. validateFields 校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件 类型：-Function([fieldNames: string[]], [options: object], callback: Function(errors, values))
13. validateFieldsAndScroll 与 validateFields 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 类型：-参考 validateFields
- validateFields/validateFieldsAndScroll 用法：
const {
form:{validateFields},
} = this
//1.简单模式 只有回调函数 callback 下方有示例
validateFields((errors,values)=>{
//...错误信息，验证值
})
// 2.中等模式
validateFields(['field1', 'field2'], (errors, values) => {
// ...验证表单域名 - 不传则校验全部
});
//3.全负荷模式
validateFields(['field1', 'field2'], options, (errors, values) => {
// ... options校验规则
});
options.first若为true，则每一表单域的都会在碰到第一个失败了的校验规则后停止校验 类型：boolean默认值falseoptions.firstFields指定表单域会在碰到第一个失败了的校验规则后停止校验String[][]options.force对已经校验过的表单域，在validateTrigger再次被触发时是否再次校验booleanf`alseoptions.scroll定义validateFieldsAndScroll的滚动行为，Object{}
validateFields 的 callback 参数示例：
-
errors
{ "userName": { "errors": [ { "message": "Please input your username!", "field": "userName" } ] }, "password": { "errors": [ { "message": "Please input your Password!", "field": "password" } ] } } -
values
{ "userName": { "errors": [ { "message": "Please input your username!", "field": "userName" } ] }, "password": { "errors": [ { "message": "Please input your Password!", "field": "password" } ] } }