Element: 在dialog弹框里放一个form，form里面的一组checkbox加了change验证后，在第二次打开弹框及以后，每次打开dialog弹框，什么都没做，它就自动验证了

[maxwellwei1]

在dialog弹框里放一个form，form里面的一组checkbox加了change验证，第一次打开后，把弹框关掉，再次打开弹框，什么都没做，这个用change的都会自动验证

ElementUI version

OS/Browers version

Vue version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

[ruiyong-lee]

能提供demo么

[maxwellwei1]

类似下面这种结构，默认addFormVisible是false，在点击新增按钮时，改变addFormVisible=true会打开弹框，然后点弹窗的右上角的叉叉关掉，再次打开，会发现里面的checkbox自动验证，我并没有做提交操作。

<el-dialog v-bind:title="dialogTitle" v-model="addFormVisible" size="small"> <el-form v-bind:model="addForm" v-bind:label-position="labelPosition" label-width="100px" v-bind:rules="addFormRules" ref="addForm"> <el-form-item label="角色選擇" prop="RoleIds"> <el-checkbox-group v-model="addForm.RoleIds"> <el-checkbox v-for="item in Roles" v-bind:label="item.Id" name="RoleIds">{{item.NameZhtw}}</el-checkbox> </el-checkbox-group> </el-form-item> </el-form> </el-dialog>

验证规则是想下面这样写的
addFormRules: {//表单验证规则
RoleIds: [{ type: 'array', required: true, message: '請至少選擇一個角色', trigger: 'change' }],
}

[ruiyong-lee]

哎，帮你搞了个demo，是这样么，不是自己改改
http://jsfiddle.net/brp52a5p/

[maxwellwei1]

谢谢，我再找找原因吧，我单独拿出来用是没有问题的，是我自己哪里写的影响了

[jikkai]

@maxwellwei1 form 上加一层 v-if 吧，dialog 关闭的时候把 form 销毁掉

[maxwellwei1]

@jikkai 谢谢，按你的方法真的解决了

[yuanyuanshen]

遇到同样的问题。但是表单要怎么销毁啊。如果表单一只需要，只是清空表单数据怎么弄呢？

[yoyo837]

同样的问题，表象是：从一个页面路由到一个新页面，触发了rules数据的变动，el-form是watch了它的，然后触发验证，导致一打开页面就自动验证了一次，但刷新，新打开并不会，ssr的。

Edit： 疑似相关的 #8060

[bingzhimengwu]

@yoyo837 我也遇到同样的问题了，请问你解决了吗

[yoyo837]

@bingzhimengwu 没有，一直有这个现象，你也是SSR场景吗？非SSR我没试过。
Edit： 试过非SSR场景似乎没有发现此问题

[yoyo837]

在SSR下，尝试https://github.com/ElemeFE/element/issues/3240#issuecomment-284315608 是可以的

[kungcn]

我也遇到了这个问题，就是在打开关闭后自动出发了多选框的校验了，看看能不能用v-if解决

[JH46666]

this.$refs.baseForm.resetFields();能够解决，你的问题。

[webmrxu]

我也遇到这个问题，也记录下我的解决方案。希望能帮到大家。

有问题代码，测试后发现是使用了 $set

if (this.rules && !this.rules[this.item.field]) {
      this.$set(this.rules, this.item.field, [])
    }

代码改为

//if (this.rules && !this.rules[this.item.field]) {
//      this.$set(this.rules, this.item.field, [])
//    }
this.rules[this.item.field] = []

遇到这个问题可以找下是否使用$set,

[xs47968224]

this.$refs.baseForm.resetFields();能够解决，你的问题。

这个重置表单的同时也解决了“新增”类型表单提交后继续新增数据，如果自已重置表单字段，程序默认启用了验证，用resetFields()完美重置

[MakerLZZ]

@kungcn 这样还是会闪一下 等弹框动画结束时红色校验才会被表单重置