[Feature Request] form-item commented how to get validateMessage

[blryli]

Existing Component

是

Component Name

el-form-item

Description

When using the form component,need to display the error message for validation in other ways,However, it is found that the validateMessage cannot be obtained within the component

validate(trigger, callback = noop) {
      this.validateDisabled = false;
      const rules = this.getFilteredRule(trigger);
      if ((!rules || rules.length === 0) && this.required === undefined) {
        callback();
        return true;
      }
      this.validateState = 'validating';
      const descriptor = {};
      if (rules && rules.length > 0) {
        rules.forEach(rule => {
          delete rule.trigger;
        });
      }
      descriptor[this.prop] = rules;
      const validator = new AsyncValidator(descriptor);
      const model = {};
      model[this.prop] = this.fieldValue;
      validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
        this.validateState = !errors ? 'success' : 'error';
        this.validateMessage = errors ? errors[0].message : '';
        callback(this.validateMessage, invalidFields);
        this.elForm && this.elForm.$emit('validate', this.prop, !errors);
      });
    }

Even though he's close to me,But you can't get him.
My idea is to put him here
this.elForm && this.elForm.$emit('validate', this.prop, !errors,this.validateMessage);

back at the farm,how do I get 'validateMessage'?

[element-bot]

Translation of this issue:

Existing Component
yes

Component Name
El-form-item

Description
When using the form component, need to display the error message for validation in other ways, however, it is found that the validateMessage cannot be obtained within the component

` '.
Validate (trigger, callback = NOOP) {

This.validateDisabled = false;
Const rules = this.getFilteredRule (trigger);

If ((rules rules rules.length = = 0) & this.required = = = undefined) {
Callback ();

Return true;
}

This.validateState ='validating';
Const descriptor = {};

If (rules & rules.length > 0) {
Rules.forEach (rule = {)

Delete rule.trigger;
});

}
Descriptor[this.prop] = rules;

Const validator = new AsyncValidator (descriptor);
Const model = {};

Model[this.prop] = this.fieldValue;
Validator.validate (model, {firstFields: true}, (errors, invalidFields) = {

This.validateState =! Errors?'success':'error';
This.validateMessage = errors? Errors[0].message: '';

Callback (this.validateMessage, invalidFields);
This.elForm & this.elForm.$emit ('validate', this.prop, errors);

});
}

` '.
Even though he's close to me, But you can't get him.

My idea is to put him here
`this.elForm & this.elForm.$emit ('validate', this.prop, errors, this.validateMessage);

Back at the farm, how do I get'validateMessage'?

[huangjinqiang]

http://output.jsbin.com/pelusunafi

[blryli]

其实我是在扩展组件的时候遇到的问题，如果说要拿到validateMessage，我还尝试过组件的另外一个方法

<el-input v-model.number="ruleForm.age" @blur="inputBlur('age')"></el-input>
methods
inputBlur(name) {
      this.$refs["ruleForm"].validateField(name, message => {
        console.log(message);
      });
    },

我扩展的组件想要达到这样的目的，把布局与逻辑校验组合起来

https://blryli-1257224242.cos.ap-guangzhou.myqcloud.com/img/QQ%E5%9B%BE%E7%89%8720180831174222.png

目前也实现了这个目的，只关注布局字段与表单数据

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" status-icon :show-message="false" @validate="getValidate">
  <el-row>
    <tp-form-line :cols="[{ span: 10, label: '名字', prop: 'name', message: '名字不能为空' },{ span: 10, label: '年龄', prop: 'age', message: '长度在 1 到 3 个字符' }]" :validate="validate" labelWidth="200px" :span="24">
      <el-input v-model="ruleForm.name"></el-input>
      <el-input v-model="ruleForm.age"></el-input>
    </tp-form-line>
  </el-row>
</el-form>

<script>
export default {
  name: "Root",
  data() {
    return {
      ruleForm: {
        name: "",
        age: ""
      },
      // 验证逻辑
      rules: {
        name: [{ required: true, trigger: "blur" }],
        age: [{ min: 1, max: 3, trigger: "blur" }]
      },
      validate: {}
    };
  },
  methods: {
    // 获取验证结果
    getValidate(name, value) {
      this.$set(this.validate, name, value);
    }
  }
};
</script>

考虑到组件的独立性，以及多重验证的实现，后面改成了这样

<el-form :model="ruleForm" ref="ruleForm" status-icon @Validate="getValidate">

<script> export default { name: "Root", data() { return { ruleForm: { age: 0, name: "" }, validate: {} }; }, methods: { // 获取验证结果 getValidate(name, value) { let obj = {value: value, message: ''} this.$set(this.validate, name, obj); }, setValidate() { return (rule, value, callback) => { if (!value) { return callback(new Error("年龄不能为空")); } if (!Number.isInteger(value)) { callback(new Error("请输入数字值")); } else { if (value < 18) { callback(new Error("必须年满18岁")); } else { callback(); } } }; } } </script>

以一个简洁的结构实现布局与逻辑校验，但是需要在每个input后面加blur事件,以及一个方法

<el-input v-model.number="ruleForm.age" @blur="inputBlur('age')"></el-input>
methods
inputBlur(name) {
      this.$refs["ruleForm"].validateField(name, message => {
        this.$set(this.validate[name], 'message', message );
      });
    },

其实是闹了很多弯子的，扩展起来比较痛苦

如果el-form-item组件内的slot提供

<slot :validateMessage="validateMessage">
      
 </slot>

或者validate事件能返回validateMessage
this.elForm & this.elForm.$emit ('validate', this.prop, errors, this.validateMessage);

那扩展起来就简单多了，这只是我浅拙的想法，不知道有没有更好的解决方案呢？
不好意思，看到你的github是中文拼音，而且有道词典翻译的也不一定准，所以选择了中文回复

[huangjinqiang]

就是希望不用原来的错误显示，同时能在单个项的rule失败后拿到信息？

感觉最好的设计还是这种，照着api绑定rule和trigger，在form上面同一处理，不用再单个item去绑定

现在想到的是，保持rule的写法不变，通过，在form的validate事件中去判断是哪个item失败了（可以通过el-form-item指定ref，不用通过校验去获取），再从这个item获取去做操作吧

[blryli]

最初的做法是把rules绑定在el-form表单内的，我们希望的是tp-form-line组件是一个独立的组件，在组件内部定义是否验证以及验证规则，所以出现了现在的情况。
既然
this.elForm & this.elForm.$emit ('validate', this.prop, errors, this.validateMessage)
是最好的设计，我能否把这个改动提交到代码库，多返回一个参数

[ziyoung]

这两个问题都有人提 PR 了。

• 校验不通过时，校验不通过后，触发 Error 事件 FormItem: Form item emits array of errors when an error occurs #12733
• FormItem 提供 scope-slot 允许用户自定义错误信息显示 FormItem: Updated el-form-item to accept custom error message via scoped-slot #12715

目前 validate 事件回调中无法获取错误信息，这个也许不太好。如果能获取到错误信息的话，我觉得 #12733 这个 pr 也许就没有必要了。
@blryli @huangjinqiang 你们怎么看？

[blryli]

针对这两个PR，其目的都是为了获取错误消息，对组件进行自定义扩展。

• https://github.com/ElemeFE/element/pull/12733的建议是在validate 事件回调中把错误信息作为第三个参数一起返回，这种方式是为了去获取到错误信息，不得不在validate事件回调中额外处理，最终再把错误信息抛回组件内部

• https://github.com/ElemeFE/element/pull/12715如果组件内部提供 scope-slot 允许用户自定义错误信息显示，个人认为这是最直接的方式，不需要从validate事件回调中获取、处理错误信息
  所以我同意你的看法 @ziyoung

[ziyoung]

@blryli pr #12715 已经合并了。你的这个功能应该很好实现了。

[blryli]

@huangjinqiang @ziyoung 好的 谢谢二位了

[liuyingqq123]

@huangjinqiang @ziyoung 好的 谢谢二位了

你好, 我也遇见这个问题了, 想把el-form-item这个组件自己再包装点东西, 提成组件后, 校验不生效. 请问你最终的解决方案是什么样的?