feat(form): add values property to FazForm

Fixes: #161

Author: piraz

src/form.tsx

@@ -44,6 +44,22 @@ export class FazFormElement extends FazElement {
             }
         }
     }
+    
+    get form(): HTMLFormElement|undefined {
+        return undefined
+    }
+
+    get values(): Record<string, FormDataEntryValue> {
+        const values: Record<string, FormDataEntryValue> = {};
+        if (this.form === undefined) {
+            return values;
+        }
+        const formData = new FormData(this.form);
+        for (const [key, value] of formData.entries()) {
+            values[key] = value;
+        }
+        return values;
+    }
 
     public clearErrorsFor(key: string) {
         const errors = { ...this.errors() };

test/form.test.tsx

@@ -15,27 +15,49 @@
  */
 
 import { FazFormElement } from "../src/form";
-import { describe, expect, test } from "vitest";
-import { allComments } from "../src/test";
+import { allComments} from "../src/test";
+import { JSX } from "solid-js/jsx-runtime";
+import { render } from "solid-js/web";
+import { afterEach, beforeEach, describe, expect, test, vitest } from "vitest";
 
 class TestForm extends FazFormElement {
 
+    public testForm: JSX.Element;
+
     constructor() {
         super();
     }
+
+    get form(): HTMLFormElement|undefined {
+        return this.testForm as HTMLFormElement;
+    }
+
+    show() {
+        this.testForm = <form></form>;
+        render(() => this.testForm, this);
+    }
 }
 
 customElements.define("test-form", TestForm);
 
+    beforeEach(() => {
+        vitest.useFakeTimers();
+    });
+    afterEach(() => {
+        vitest.useRealTimers();
+    });
 
 describe("Test Forms", () => {
-    test("Form errors", () => {
+    test("Form errors", async() => {
         document.body.innerHTML = `
             <test-form>
+                <input name="input1" value="1"/>
+                <input name="input2" value="2"/>
             </test-form>
         `;
         const [formComment] = allComments(document.body);
         const form = formComment.fazElement() as FazFormElement;
+        await vitest.runAllTimersAsync();
         expect(form.hasErrors()).toBeFalsy();
         form.pushError("field1", "error 1");
         form.pushError("field1", "error 1");
@@ -45,10 +67,11 @@ describe("Test Forms", () => {
         expect(form.hasErrorsFor("field1")).toBeTruthy();
         expect(form.hasErrorsFor("field2")).toBeTruthy();
         expect(form.hasErrorsFor("field3")).toBeFalsy();
-        expect(form.getErrorsFor("field1").length == 2).toBeTruthy();
-        expect(form.getErrorsFor("field2").length == 1).toBeTruthy();
+        expect(form.getErrorsFor("field1").length).toBe(2);
+        expect(form.getErrorsFor("field2").length).toBe(1);
         form.clearErrors();
         expect(form.hasErrors()).toBeFalsy();
-
+        expect(form.form).toStrictEqual((form as TestForm).testForm);
+        expect(form.values).toStrictEqual({ input1: '1', input2: '2' });
     });
 });

types/form.d.ts

@@ -23,6 +23,8 @@ export declare class FazFormElement extends FazElement {
     method: Accessor<string>;
     setMethod: Setter<string>;
     constructor();
+    get form(): HTMLFormElement | undefined;
+    get values(): Record<string, FormDataEntryValue>;
     clearErrorsFor(key: string): void;
     clearErrors(): void;
     hasErrorsFor(key: string): boolean;