feat: setFormDataToForm support arrays now (#12)

vardario · Nov 6, 2023 · f746636 · f746636
1 parent cf28d23
commit f746636
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 14 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.11",
+  "version": "0.1.12",
   "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.11",
+  "version": "0.1.12",
   "private": true,
   "scripts": {
     "dev": "next dev",

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

diff --git a/library/src/form-validation.ts b/library/src/form-validation.ts
@@ -6,16 +6,19 @@ export const DATA_VALIDATION_ERROR_MESSAGE_ATTRIBUTE_NAME = 'data-validation-err
 export const DATA_VALIDATION_REQUIRED_ATTRIBUTE_NAME = 'data-validation-required';
 
 function setSelectElementValue(selectElement: HTMLSelectElement, values: string[]) {
-  for (const child of selectElement.children) {
-    if (child.nodeName === 'OPTION') {
-      const optionElement = child as HTMLOptionElement;
-      optionElement.removeAttribute('selected');
-
-      if (values.includes(optionElement.value)) {
-        optionElement.setAttribute('selected', '');
-      }
-    }
-  }
+  const options = [...selectElement.children].filter((item) => item.nodeName === 'OPTION') as HTMLOptionElement[];
+  options.forEach((option) => option.removeAttribute('selected'));
+
+  const selectedOptions = options.filter((option) => values.includes(option.value));
+  selectedOptions.forEach((option) => option.setAttribute('selected', ''));
+
+  const valueDiff = values.filter((value) => options.find((option) => option.value === value) === undefined);
+  valueDiff.forEach((value) => {
+    const option = document.createElement('option');
+    option.setAttribute('value', value);
+    option.setAttribute('selected', '');
+    selectElement.add(option);
+  });
 }
 
 function setInputElementValue(inputElement: HTMLInputElement, value: string) {

diff --git a/library/src/tests/form-validation.test.ts b/library/src/tests/form-validation.test.ts
@@ -1,4 +1,6 @@
+import { JSDOM } from 'jsdom';
 import { describe, expect, test } from 'vitest';
+import { z } from 'zod';
 import {
   setDataToForm,
   setFormDataToForm,
@@ -18,6 +20,30 @@ describe('Form Validation', () => {
     const formData = new FormData(form!);
 
     expect(formDataToData(formData, SCHEMA)).toStrictEqual(EXPECTED_DATA);
+
+    const arraySchema = z.object({
+      array: z.array(z.number()),
+    });
+    const formWithSelectDom = new JSDOM('<form><select multiple name="array"></select></form>');
+    const arrayFrom = formWithSelectDom.window.document.querySelector('form');
+    expect(arrayFrom).not.toBeNull();
+
+    let arrayFormDataA = new FormData(arrayFrom!);
+    let arrayFormDataB = new FormData(arrayFrom!);
+
+    const arrayValuesA = [0, 1, 2, 3, 4];
+    const arrayValuesB = [0, 3, 4];
+
+    arrayValuesA.forEach((value) => arrayFormDataA.append('array', value.toString()));
+    arrayValuesB.forEach((value) => arrayFormDataB.append('array', value.toString()));
+
+    setFormDataToForm(arrayFrom!, arrayFormDataA);
+    arrayFormDataA = new FormData(arrayFrom!);
+    expect(formDataToData(arrayFormDataA, arraySchema)).toStrictEqual({ array: arrayValuesA });
+
+    setFormDataToForm(arrayFrom!, arrayFormDataB);
+    arrayFormDataB = new FormData(arrayFrom!);
+    expect(formDataToData(arrayFormDataB, arraySchema)).toStrictEqual({ array: arrayValuesB });
   });
 
   test('setDataToForm', () => {

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