feat: added formDataToData and type fixes (#7)

vardario · Nov 1, 2023 · a899959 · a899959
1 parent a9c2e8e
commit a899959
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 9 deletions.
diff --git a/examples/html/package.json b/examples/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zod-form-validation-html-example",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "",
   "main": "index.html",
   "scripts": {

diff --git a/examples/next/package.json b/examples/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/examples/svelte/src/lib/components/form.svelte b/examples/svelte/src/lib/components/form.svelte
@@ -23,7 +23,7 @@
   let doValidateOnInput = false;
 
   $: {
-    form && data && setFormDataToForm(form, objectToFormData(data));
+    form && data && setFormDataToForm(form, data);
      data && console.log( objectToFormData(data))
     
   }

diff --git a/library/package.json b/library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vardario/zod-form-validation",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "",
   "main": "dist/index.js",
   "type": "module",

diff --git a/library/src/form-validation.ts b/library/src/form-validation.ts
@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { flattenSchema, formDataToObject, groupIssuesByName, preprocess } from './utils.js';
+import { flattenSchema, formDataToObject, groupIssuesByName, objectToFormData, preprocess } from './utils.js';
 
 export const DATA_VALIDATION_ERROR_ATTRIBUTE_NAME = 'data-validation-error';
 export const DATA_VALIDATION_ERROR_MESSAGE_ATTRIBUTE_NAME = 'data-validation-error-message';
@@ -50,6 +50,11 @@ export function setFormDataToForm(form: HTMLFormElement, formData: FormData) {
   }
 }
 
+export function setDataToForm(form: HTMLFormElement, data: any) {
+  const formData = objectToFormData(data);
+  setFormDataToForm(form, formData);
+}
+
 export function validateFormData<TSchema extends z.Schema>(formData: FormData, schema: TSchema) {
   const object = preprocess(formDataToObject(formData), schema);
   return schema.safeParse(object);

diff --git a/library/src/tests/form-validation.test.ts b/library/src/tests/form-validation.test.ts
@@ -1,11 +1,12 @@
 import { describe, expect, test } from 'vitest';
 import {
+  setDataToForm,
   setFormDataToForm,
   setRequiresToForm,
   setValidationErrorsToForm,
   validateFormData,
 } from '../form-validation.js';
-import { formDataToObject, preprocess } from '../utils.js';
+import { formDataToData } from '../utils.js';
 import { EXPECTED_DATA, SCHEMA, getDom, getFormData } from './test-fixtures.js';
 
 describe('Form Validation', () => {
@@ -16,7 +17,17 @@ describe('Form Validation', () => {
     setFormDataToForm(form!, getFormData());
     const formData = new FormData(form!);
 
-    expect(preprocess(formDataToObject(formData), SCHEMA)).toStrictEqual(EXPECTED_DATA);
+    expect(formDataToData(formData, SCHEMA)).toStrictEqual(EXPECTED_DATA);
+  });
+
+  test('setDataToForm', () => {
+    const dom = getDom();
+    const form = dom.window.document.querySelector('form');
+    expect(form).not.toBeNull();
+
+    setDataToForm(form!, EXPECTED_DATA);
+    const formData = new FormData(form!);
+    expect(formDataToData(formData, SCHEMA)).toStrictEqual(EXPECTED_DATA);
   });
 
   test('validateFormData', () => {

diff --git a/library/src/tests/utils.test.ts b/library/src/tests/utils.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, test } from 'vitest';
 import {
   flattenObject,
   flattenSchema,
+  formDataToData,
   formDataToObject,
   objectToFormData,
   parseFormData,
@@ -103,4 +104,8 @@ describe('utils', () => {
       expect(result.data).toStrictEqual(EXPECTED_DATA);
     }
   });
+
+  test('formDataToData', () => {
+    expect(formDataToData(getFormData(), SCHEMA)).toStrictEqual(EXPECTED_DATA);
+  });
 });
diff --git a/library/src/utils.ts b/library/src/utils.ts
@@ -111,7 +111,12 @@ export function formDataToObject(formData: FormData) {
   return result;
 }
 
-export function objectToFormData(obj: ObjectType) {
+export function formDataToData<TSchema extends z.ZodSchema>(formData: FormData, schema: TSchema){
+  return preprocess(formDataToObject(formData), schema);
+
+}
+
+export function objectToFormData(obj: any) {
   const flatObject = flattenObject(obj) as Record<string, any>;
 
   const formData = new FormData();

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "root",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "license": "MIT",
   "repository": {
     "type": "git",