Form升级为FormModel用法
最后更新于:2022-04-02 07:15:33
## FormModel 表单 (支持 v-model 绑定)(Ant Design of Vue 版本:1.5.0+)
[TOC]
### 新版form特性
- 1、支持双向绑定
- 2、无需v-decorator这个反人类属性设置
- 3、form用法跟目前主流框架(element ui iview风格形成统一,不在另类)
- 4、表单赋值无需手动设置,双向绑定自动赋值
### 新老form用法对比
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/39/0b/390bc788053e66e11ba92b1d087994f1_1845x816.png)
标签规则升级
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/10/b6/10b636555cc5ec7f19cdad4e6573558c_1798x514.png)
校验规则区别
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/8e/99/8e99190e52f21df00a76a928502a7dbf_1866x555.png)
表单赋值区别
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/a0/fa/a0faeae320544b086b1ed6d73218e3a8_1625x436.png)
表单提交区别
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/bf/b8/bfb8a62523d13209c20fa5beb39478b9_1656x551.png)
### 代码案例分析
角色管理老版form代码
```
~~~
';
```
角色管理新版from代码
```
```
### 注意:这里有大坑
~~~
this.$refs.form.resetFields();
ant-design-vue官方文档声明
对整个表单进行重置,将所有字段值重置为初始值并移除校验结果
但是实际form绑定的model无法清除原始值。所以添加页面和编辑页面的时候,一定先清空,再设置默认值。
~~~
千万不要这么写
~~~
this.edit(this.model)
~~~
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/dd/89/dd89e94e4fa7efeb23f8310cbbd96453_1108x206.png)
### 官方文档
[官方FormModel用法](https://www.antdv.com/components/form-model-cn/)