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用法对比

标签规则升级

校验规则区别

表单赋值区别

表单提交区别

### 代码案例分析
角色管理老版form代码
```
~~~
';
```
角色管理新版from代码
```
```
### 注意:这里有大坑
~~~
this.$refs.form.resetFields();
ant-design-vue官方文档声明
对整个表单进行重置,将所有字段值重置为初始值并移除校验结果
但是实际form绑定的model无法清除原始值。所以添加页面和编辑页面的时候,一定先清空,再设置默认值。
~~~
千万不要这么写
~~~
this.edit(this.model)
~~~

### 官方文档
[官方FormModel用法](https://www.antdv.com/components/form-model-cn/)