ant-design-vue 1.x 自定义组件如何触发 a-form-model-item 校验

原创
前端路迹
2022-7-9 11:48
编辑于 2022-7-9 12:16

在数据变化的时候,触发事件 blur 或者change,这个取决于验证规则用的那种触发校验方式。

 handleChange() {
            this.$emit('input', this.imgList)
                        // 触发校验
            this.$emit('blur')
        },

在 ant-design-vue 的源码中可以看到,blur 和 change 绑定了触发验证,因此可以通过此方法来触发校验。

if (this.prop && this.autoLink && isValidElement(firstChildren)) {
      const originalEvents = getEvents(firstChildren);
      const originalBlur = originalEvents.blur;
      const originalChange = originalEvents.change;
      firstChildren = cloneElement(firstChildren, {
        on: {
          blur: (...args) => {
            originalBlur && originalBlur(...args);
            this.onFieldBlur();
          },
          change: (...args) => {
            if (Array.isArray(originalChange)) {
              for (let i = 0, l = originalChange.length; i < l; i++) {
                originalChange[i](...args);
              }
            } else if (originalChange) {
              originalChange(...args);
            }
            this.onFieldChange();
          },
        },
      });
    }
转载请注明出处。本文地址: https://www.qinshenxue.com/article/how-ant-design-vue-1-custom-components-trigger-a-form-model-item-validation.html
关注我的公众号