web/elements: add support for dot-notation in input names

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/forms/Form.ts

@@ -140,13 +140,33 @@ export class Form<T> extends LitElement {
                 json[element.name] = element.checked;
             } else {
                 for (let v = 0; v < values.length; v++) {
-                    form._addSerializedElement(json, element.name, values[v]);
+                    this.serializeFieldRecursive(element, values[v], json);
                 }
             }
         });
         return json as unknown as T;
     }
 
+    private serializeFieldRecursive(
+        element: HTMLInputElement,
+        value: unknown,
+        json: { [key: string]: unknown },
+    ): void {
+        let parent = json;
+        if (!element.name.includes(".")) {
+            parent[element.name] = value;
+            return;
+        }
+        const nameElements = element.name.split(".");
+        for (let index = 0; index < nameElements.length - 1; index++) {
+            const nameEl = nameElements[index];
+            // Ensure all nested structures exist
+            if (!(nameEl in parent)) parent[nameEl] = {};
+            parent = parent[nameEl] as { [key: string]: unknown };
+        }
+        parent[nameElements[nameElements.length - 1]] = value;
+    }
+
     submit(ev: Event): Promise<unknown> | undefined {
         ev.preventDefault();
         const ironForm = this.shadowRoot?.querySelector("iron-form");