解决ivew 动态表单规则问题 form rule bug
- Dominant language
- Vue
- Stars
- 16.3k
- Forks
- 4.7k
- PR merge metrics
- No merged PRs in 30d
Description
能够复现问题的在线示例(bug 相关不提供在线示例将直接 close)
http://jsbin.com/nepicod/7/edit?html,js,console,output
复现步骤
问题现象,以及你期望的结果是怎样的?
Form初始化的时候不设置rules,而是后期动态添加(异步请求或者其他方式),这些规则即使设置了blur触发也没有效果,但是整个Form执行validate是可以校验的
以下可暂时解决此问题:
1.找到node_modules中iview的components目录下的form.vue组件
目录:node_modules=>ivew=>src=>components=>form=>form.vue
拷贝出来放到自己项目目录中任意地方,我是放在自己的compontents文件夹下面,别忘了组件依赖的js方法也得拷贝出来,这样做的意义在于避免修改官方的组件代码,带来未知的bug。

2.修改form.vue文件watch下面监听的rules

watch: {
rules() {
this.fields.forEach((field, index) => {
field.resetError();
});
}
},
3.修改form-Item.vue文件,新增resetError()方法

resetError() {
this.validateState = "";
this.validateMessage = "";
this.$off("on-form-blur");
this.$off("on-form-change");
this.$on("on-form-blur", this.onFieldBlur);
this.$on("on-form-change", this.onFieldChange);
}
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the online reproduction at http://jsbin.com/nepicod/7/edit?html,js,console,output and inspect components/form/form.vue and form-item.vue. Reproduce rules added after Form initialization, then verify that dynamically added rules trigger validation on blur as well as during full Form validation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 25/100