Element-Ui表单移除校验clearValidate和resetFields

简介: 添加和修改公用一个弹窗,点击添加弹窗后,如果没移除表单校验的话,再点击修改弹窗时校验就会被记住,所以需要移除校验,但在清空表单校验时会报如下错误:那么,你只需要加上这段话即可this.$nextTick(()=>{ this.$refs.addArray.resetFields(); })再此,我顺便说一下resetFields和clearValidate的区别: this.$refs.form.resetFields(); //移除表单校验并初始化表单,一般用于.


添加和修改公用一个弹窗,点击添加弹窗后,如果没移除表单校验的话,再点击修改弹窗时校验就会被记住,所以需要移除校验,但在清空表单校验时会报如下错误:

请在此添加图片描述

那么,你只需要加上这段话即可

this.$nextTick(()=>{
   
   
    this.$refs.addArray.resetFields(); 
 })

再此,我顺便说一下resetFields和clearValidate的区别:

this.$refs.form.resetFields(); //移除表单校验并初始化表单,一般用于添加

this.$refs.form.clearValidate(); //移除表单校验,一般用于修改

注:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数

以上就是Element-Ui表单移除校验clearValidate和resetFields的介绍,做此记录,如有帮助,欢迎点赞关注收藏!

目录
相关文章
|
6天前
element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作
element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作
41 0
|
6天前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
12 0
|
6月前
|
JavaScript
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
282 0
|
6天前
|
前端开发
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
17 0
|
6天前
|
JSON 数据格式
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
18 0
|
9月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件10
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件10
33 0
|
6月前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
34 1
|
6月前
Element UI 重置表单功能
Element UI 重置表单功能
|
7月前
|
存储 测试技术
SAP UI5 Currency 数据类型的校验逻辑分析
SAP UI5 Currency 数据类型的校验逻辑分析
46 0
|
7月前
|
Web App开发 前端开发 JavaScript
SAP UI5 SmartForm 智能表单控件的使用方法介绍试读版
SAP UI5 SmartForm 智能表单控件的使用方法介绍试读版
29 0

热门文章

最新文章