Add get accessor for value for basic inputs.

src/declaform/declaform.ts

@@ -21,9 +21,13 @@ export class Declaform extends HTMLElement {
         const customInputs = this.getAttribute('customInputs')?.split(',').map(x => x.trim()) ?? [];
         const selectors = ['input', 'select'].concat(customInputs).map(x => `${x}[name]`).join(',');
         const inputs = Array.from(this.querySelectorAll(selectors));
+
         // group inputs by name
-        const inputGroups = new Map<string, Element[]>();
+        const inputGroups = new Map<string, FieldElement[]>();
         for (const input of inputs) {
+            if (!isFieldElement(input)) {
+                throw new Error(`[Declaform] Error: input does not have all fields: ["name", "type", "value"].`);
+            }
             const name = input.getAttribute('name');
             if (name) {
                 const group = inputGroups.get(name);
@@ -47,22 +51,64 @@ export class Declaform extends HTMLElement {
     get fields() {
         return this._fields;
     }
+
+    toJSON() {}
 }
 
 customElements.define('decla-form', Declaform);
 
+interface FieldElement {
+    name: string;
+    type: string;
+    value: any;
+}
+
+function isFieldElement(x: unknown): x is FieldElement {
+    if (typeof x !== 'object' || !x) {
+        return false;
+    }
+
+    if (!('name' in x) || !('type' in x) || !('value' in x)) {
+        return false;
+    }
+
+    return true;
+}
+
+/**
+ * This is the object that ties a group of inputs to a name.
+ * It assumes that every input in the group is of the same type.
+ */
 class Field {
-    constructor(private name: string, private _inputs: Element[]) {
+
+    /* The character that gets used to join multiple field values */
+    static joining_char = ',';
+
+    private _type: string;
+
+    constructor(private name: string, private _inputs: FieldElement[]) {
+        if (this._inputs.length === 0) {
+            throw new Error("[Declaform] Error: cannot construct Field with empty inputs array.")
+        }
+        this._type = this._inputs[0]!.type;
     }
 
     get value() {
-        return '';
+        switch(this._type) {
+            default:
+            case 'date':
+            case 'datatime-local':
+            case 'email':
+            case 'number':
+            case 'text':
+                return this._inputs.map(x => x.value);
+        }
     }
 
     set value(x: any) {
     }
 
     get type() {
-        return '';
+        return this._type;
     }
 }