From b439a73bf3c37298c251b74223984d54b8949a95 Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <logaretm1@gmail.com>
Date: Tue, 25 May 2021 00:35:42 +0200
Subject: [PATCH] fix: re-introduce the errors prop back on the form validation
 result closes #3317

---
 packages/vee-validate/src/types.ts          |  1 +
 packages/vee-validate/src/useForm.ts        | 34 ++++++++++++-------
 packages/vee-validate/src/validate.ts       | 36 +++++++++++++--------
 packages/vee-validate/tests/useForm.spec.ts |  8 +++++
 4 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/packages/vee-validate/src/types.ts b/packages/vee-validate/src/types.ts
index 791eef652..612a9a3e3 100644
--- a/packages/vee-validate/src/types.ts
+++ b/packages/vee-validate/src/types.ts
@@ -95,6 +95,7 @@ export interface FormActions<TValues extends Record<string, unknown>> {
 export interface FormValidationResult<TValues> {
   valid: boolean;
   results: Partial<Record<keyof TValues, ValidationResult>>;
+  errors: Partial<Record<keyof TValues, string>>;
 }
 
 export interface SubmissionContext<TValues extends Record<string, unknown> = Record<string, unknown>>
diff --git a/packages/vee-validate/src/useForm.ts b/packages/vee-validate/src/useForm.ts
index 961520810..86ee30550 100644
--- a/packages/vee-validate/src/useForm.ts
+++ b/packages/vee-validate/src/useForm.ts
@@ -337,7 +337,7 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
     }
 
     // No schema, each field is responsible to validate itself
-    const results = await Promise.all(
+    const validations = await Promise.all(
       fields.value.map(f => {
         return f.validate().then((result: ValidationResult) => {
           return {
@@ -349,16 +349,23 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
       })
     );
 
-    return {
-      valid: results.every(r => r.valid),
-      results: results.reduce((acc, r) => {
-        acc[r.key as keyof TValues] = {
-          valid: r.valid,
-          errors: r.errors,
-        };
+    const results: Partial<Record<keyof TValues, ValidationResult>> = {};
+    const errors: Partial<Record<keyof TValues, string>> = {};
+    for (const validation of validations) {
+      results[validation.key as keyof TValues] = {
+        valid: validation.valid,
+        errors: validation.errors,
+      };
 
-        return acc;
-      }, {} as Partial<Record<keyof TValues, ValidationResult>>),
+      if (validation.errors.length) {
+        errors[validation.key as keyof TValues] = validation.errors[0];
+      }
+    }
+
+    return {
+      valid: validations.every(r => r.valid),
+      results,
+      errors,
     };
   }
 
@@ -453,7 +460,7 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
   async function validateSchema(mode: SchemaValidationMode): Promise<FormValidationResult<TValues>> {
     const schemaValue = unref(schema);
     if (!schemaValue) {
-      return { valid: true, results: {} };
+      return { valid: true, results: {}, errors: {} };
     }
 
     const formResult = isYupValidator(schemaValue)
@@ -480,6 +487,9 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
           valid: !messages.length,
         };
         validation.results[path as keyof TValues] = fieldResult;
+        if (!fieldResult.valid) {
+          validation.errors[path as keyof TValues] = fieldResult.errors[0];
+        }
 
         // field not rendered
         if (!field) {
@@ -503,7 +513,7 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
 
         return validation;
       },
-      { valid: formResult.valid, results: {} } as FormValidationResult<TValues>
+      { valid: formResult.valid, results: {}, errors: {} } as FormValidationResult<TValues>
     );
   }
 
diff --git a/packages/vee-validate/src/validate.ts b/packages/vee-validate/src/validate.ts
index 2310767be..1c6b3fce9 100644
--- a/packages/vee-validate/src/validate.ts
+++ b/packages/vee-validate/src/validate.ts
@@ -202,7 +202,7 @@ export async function validateYupSchema<TValues>(
   schema: SchemaOf<TValues>,
   values: TValues
 ): Promise<FormValidationResult<TValues>> {
-  const errors: ValidationError[] = await (schema as YupValidator)
+  const errorObjects: ValidationError[] = await (schema as YupValidator)
     .validate(values, { abortEarly: false })
     .then(() => [])
     .catch((err: ValidationError) => {
@@ -216,16 +216,20 @@ export async function validateYupSchema<TValues>(
       return err.inner || [];
     });
 
-  const results = errors.reduce((acc, err) => {
-    const messages = err.errors;
-    acc[err.path as keyof TValues] = { valid: !messages.length, errors: messages };
-
-    return acc;
-  }, {} as Partial<Record<keyof TValues, ValidationResult>>);
+  const results: Partial<Record<keyof TValues, ValidationResult>> = {};
+  const errors: Partial<Record<keyof TValues, string>> = {};
+  for (const error of errorObjects) {
+    const messages = error.errors;
+    results[error.path as keyof TValues] = { valid: !messages.length, errors: messages };
+    if (messages.length) {
+      errors[error.path as keyof TValues] = messages[0];
+    }
+  }
 
   return {
-    valid: !errors.length,
+    valid: !errorObjects.length,
     results,
+    errors,
   };
 }
 
@@ -249,21 +253,25 @@ export async function validateObjectSchema<TValues>(
   });
 
   let isAllValid = true;
-  const results = (await Promise.all(validations)).reduce((acc, result) => {
-    acc[result.path as keyof TValues] = {
+  const validationResults = await Promise.all(validations);
+
+  const results: Partial<Record<keyof TValues, ValidationResult>> = {};
+  const errors: Partial<Record<keyof TValues, string>> = {};
+  for (const result of validationResults) {
+    results[result.path as keyof TValues] = {
       valid: result.valid,
       errors: result.errors,
-    } as ValidationResult;
+    };
 
     if (!result.valid) {
       isAllValid = false;
+      errors[result.path as keyof TValues] = result.errors[0];
     }
-
-    return acc;
-  }, {} as Partial<Record<keyof TValues, ValidationResult>>);
+  }
 
   return {
     valid: isAllValid,
     results,
+    errors,
   };
 }
diff --git a/packages/vee-validate/tests/useForm.spec.ts b/packages/vee-validate/tests/useForm.spec.ts
index 1bc62fdd0..095e0c3a8 100644
--- a/packages/vee-validate/tests/useForm.spec.ts
+++ b/packages/vee-validate/tests/useForm.spec.ts
@@ -172,6 +172,10 @@ describe('useForm()', () => {
     const result = await validate();
     expect(result).toEqual({
       valid: false,
+      errors: {
+        field1: REQUIRED_MESSAGE,
+        field2: REQUIRED_MESSAGE,
+      },
       results: {
         field1: {
           valid: false,
@@ -209,6 +213,10 @@ describe('useForm()', () => {
     const result = await validate();
     expect(result).toEqual({
       valid: false,
+      errors: {
+        field1: REQUIRED_MESSAGE,
+        field2: REQUIRED_MESSAGE,
+      },
       results: {
         field1: {
           valid: false,