iview / iview/iview-admin

解决ivew 动态表单规则问题 form rule bug

Open
#663 1 comment 0 reactions 0 assignees View on GitHub
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。
![image](https://user-images.githubusercontent.com/15320626/40532402-eb1ae4e4-6031-11e8-894d-963afbe91603.png)

2.修改form.vue文件watch下面监听的rules
![image](https://user-images.githubusercontent.com/15320626/40532480-277b1738-6032-11e8-8bcc-4b1290d5dc96.png)

watch: {
rules() {
this.fields.forEach((field, index) => {
field.resetError();
});
}
},
3.修改form-Item.vue文件,新增resetError()方法
![image](https://user-images.githubusercontent.com/15320626/40532496-31ef5a4e-6032-11e8-9491-b628f184806f.png)

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.