FormItem: Form item emits array of errors when an error occurs

examples/docs/en-US/form.md

@@ -139,6 +139,9 @@
       onRuleFormSubmit() {
         console.log('onRuleFormSubmit');
       },
+      onError(errors) {
+        console.log('Field errors', errors)
+      },
       submitForm(formName) {
         this.$refs[formName].validate((valid) => {
           if (valid) {
@@ -418,12 +421,14 @@ Depending on your design, there are several different ways to align your label e
 ### Validation
 
 Form component allows you to verify your data, helping you find and correct errors.
+Can also listen to errors on a particular form element by listening to the error event on `Form-Item`.
+
 
-:::demo Just add the `rules` attribute for `Form` component, pass validation rules, and set `prop` attribute for `Form-Item` as a specific key that needs to be validated. See more information at [async-validator](https://github.com/yiminghe/async-validator).
+:::demo Just add the `rules` attribute for `Form` component, pass validation rules, and set `prop` attribute for `Form-Item` as a specific key that needs to be validated. See more information at [async-validator](https://github.com/yiminghe/async-validator). 
 
 ```html
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
-  <el-form-item label="Activity name" prop="name">
+  <el-form-item @error="onError" label="Activity name" prop="name">
     <el-input v-model="ruleForm.name"></el-input>
   </el-form-item>
   <el-form-item label="Activity zone" prop="region">
@@ -523,7 +528,10 @@ Form component allows you to verify your data, helping you find and correct erro
       },
       resetForm(formName) {
         this.$refs[formName].resetFields();
-      }
+      },
+      onError(errors) {
+        console.log('Field errors', errors)
+      },
     }
   }
 </script>
@@ -890,4 +898,9 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | Method | Description | Parameters |
 | ---- | ---- | ---- |
 | resetField | reset current field and remove validation result | — |
-| clearValidate | remove validation status of the field | - |
+| clearValidate | remove validation status of the field | -
+
+### Form-Item Events
+| Event Name | Description | Parameters |
+|----------- |------------ |----------- |
+| error   | triggers when a validation error occurs on this form item | an array of field names and errors registered on them |

examples/docs/es/form.md

@@ -904,7 +904,12 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 
 ### Form-Item Metodo
 
-| Metodo        | Descripción                                                 | Parametros |
-| ------------- | ----------------------------------------------------------- | ---------- |
-| resetField    | restablecer campo actual y eliminar resultado de validación | —          |
-| clearValidate | elimina el estado de la validacion de un campo              | -          |
+| Metodo     | Descripción                              | Parametros |
+| ---------- | ---------------------------------------- | ---------- |
+| resetField | restablecer campo actual y eliminar resultado de validación | —          |
+| clearValidate | elimina el estado de la validacion de un campo | - |
+
+### Form-Item Events
+| Nombre   | Descripción                                          | Parametros                                                   |
+|----------- |------------ |----------- |
+| error   | se activa cuando se produce un error de validación en este elemento de formulario | una matriz de nombres de campo y errores registrados en ellos |

examples/docs/zh-CN/form.md

@@ -879,3 +879,8 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 |---------- |-------------- | --------------
 | resetField | 对该表单项进行重置，将其值重置为初始值并移除校验结果 | -
 | clearValidate | 移除该表单项的校验结果 | -
+
+### Form-Item Events
+| 事件名称 | 说明    | 回调参数  |
+|----------- |------------ |----------- |
+| error   | 在此表單項上發生驗證錯誤時觸發 | 在其上註冊的字段名稱和錯誤數組 |

packages/form/src/form-item.vue

@@ -195,9 +195,11 @@
         model[this.prop] = this.fieldValue;
 
         validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
+          if (errors) {
+            this.$emit('error', errors);
+          }
           this.validateState = !errors ? 'success' : 'error';
           this.validateMessage = errors ? errors[0].message : '';
-
           callback(this.validateMessage, invalidFields);
           this.elForm && this.elForm.$emit('validate', this.prop, !errors);
         });