feat(FormStore): support nested structures in form data handling

willc001 · willc001 · commit 8b85d87939c3 · 2025-12-09T14:55:14.000+08:00
Closes NEXT_BUILDER-5249
diff --git a/shared/form/src/FormStore.spec.ts b/shared/form/src/FormStore.spec.ts
@@ -313,7 +313,12 @@ describe("FormStore", () => {
 
     store.resetFields();
 
-    expect(store.getAllValues()).toEqual({});
+    expect(store.getAllValues()).toStrictEqual({
+      a: undefined,
+      b: undefined,
+      c: undefined,
+      "validator-item": undefined,
+    });
   });
 
   it("scrollToField should work", () => {
@@ -334,4 +339,156 @@ describe("FormStore", () => {
 
     expect(mockScrollTo).toHaveBeenCalledWith("a.scroll.to", null);
   });
+
+  test("support nested object and array structures", () => {
+    const store = new FormStore();
+
+    store.setField("user.name", {
+      name: "user.name",
+      label: "用户名",
+      validate: {
+        required: true,
+      },
+    });
+    store.setField("user.age", {
+      name: "user.age",
+      label: "年龄",
+      validate: {
+        type: "number",
+      },
+    });
+    store.setField("items[0].name", {
+      name: "items[0].name",
+      label: "第一个项目名称",
+      validate: {
+        required: true,
+      },
+    });
+    store.setField("items[1].name", {
+      name: "items[1].name",
+      label: "第二个项目名称",
+      validate: {},
+    });
+
+    // setInitValue
+    store.setInitValue({
+      user: {
+        name: "test",
+        age: 18,
+      },
+      items: [{ name: "item1" }, { name: "item2" }],
+    });
+
+    // getFieldsValue
+    expect(store.getFieldsValue("user.name")).toBe("test");
+    expect(store.getFieldsValue("user.age")).toBe(18);
+    expect(store.getFieldsValue("items[0].name")).toBe("item1");
+    expect(store.getFieldsValue("items[1].name")).toBe("item2");
+
+    // getAllValues
+    const allValues = store.getAllValues();
+    expect(allValues).toEqual({
+      user: {
+        name: "test",
+        age: 18,
+      },
+      items: [{ name: "item1" }, { name: "item2" }],
+    });
+
+    // setFieldsValue
+    store.setFieldsValue({
+      user: {
+        name: "updated",
+        age: 20,
+      },
+    });
+
+    expect(store.getFieldsValue("user.name")).toBe("updated");
+    expect(store.getFieldsValue("user.age")).toBe(20);
+
+    // validateFields
+    const mockValidateFields = jest.fn();
+    store.validateFields(mockValidateFields);
+
+    expect(mockValidateFields).toHaveBeenCalledWith(false, {
+      user: {
+        name: "updated",
+        age: 20,
+      },
+      items: [{ name: "item1" }, { name: "item2" }],
+    });
+
+    // resetFields
+    store.resetFields("user.name");
+    expect(store.getFieldsValue("user.name")).toBeUndefined();
+    expect(store.getFieldsValue("user.age")).toBe(20);
+
+    store.resetFields();
+    expect(store.getAllValues()).toStrictEqual({
+      items: [
+        {
+          name: undefined,
+        },
+        {
+          name: undefined,
+        },
+      ],
+      user: {
+        age: undefined,
+        name: undefined,
+      },
+    });
+  });
+
+  test("handle notRender fields when reading and setting values", () => {
+    const store = new FormStore();
+
+    store.setField("visible-field", {
+      name: "visible-field",
+      validate: {
+        required: true,
+      },
+    });
+    store.setField("hidden-field", {
+      name: "hidden-field",
+      notRender: true,
+      validate: {
+        required: true,
+      },
+    });
+
+    store.setInitValue({
+      "visible-field": "visible",
+      "hidden-field": "hidden",
+    });
+
+    // getFieldsValue
+    expect(store.getFieldsValue("visible-field")).toBe("visible");
+    expect(store.getFieldsValue("hidden-field")).toBeUndefined();
+
+    // getAllValues
+    expect(store.getAllValues()).toEqual({ "visible-field": "visible" });
+
+    // setFieldsValueByInitData
+    store.setInitValue({
+      "visible-field": "init-visible",
+      "hidden-field": "init-hidden",
+    });
+
+    store.resetFields("visible-field");
+    expect(store.getFieldsValue("visible-field")).toBeUndefined();
+
+    store.setFieldsValueByInitData("visible-field");
+    store.setFieldsValueByInitData("hidden-field");
+
+    expect(store.getFieldsValue("visible-field")).toBe("init-visible");
+    expect(store.getFieldsValue("hidden-field")).toBeUndefined();
+
+    // validateField
+    const validateResultVisible = store.validateField("visible-field");
+    expect(validateResultVisible).toBeDefined();
+
+    const validateResultHidden = store.validateField("hidden-field");
+    expect(validateResultHidden).toBeUndefined();
+  });
 });
diff --git a/shared/form/src/FormStore.ts b/shared/form/src/FormStore.ts
@@ -1,4 +1,4 @@
-import { isEmpty, isNil } from "lodash";
+import { isEmpty, get, has, set, unset } from "lodash";
 import { PubSub } from "./PubSub.js";
 
 interface FormStoreOptions {
@@ -74,6 +74,7 @@ export class FormStore extends PubSub {
 
   setField(name: string, detail: FieldDetail) {
     this.#fields.set(name, new Field(name, detail));
+    this.setFieldsValueByInitData(name);
   }
   #getAllFields() {
     return [...this.#fields.keys()].filter((key) => {
@@ -83,16 +84,13 @@ export class FormStore extends PubSub {
 
   getAllValues() {
     const allFields = this.#getAllFields();
-    const formData = Object.fromEntries(
-      Object.entries(this.#formData)
-        .map(([k, v]) => {
-          if (allFields.includes(k)) {
-            return [k, v];
-          }
-          return [];
-        })
-        .filter((item) => item.length)
-    );
+    const formData: Record<string, unknown> = {};
+
+    allFields.forEach((fieldName) => {
+      const value = get(this.#formData, fieldName);
+      set(formData, fieldName, value);
+    });
+
     return formData;
   }
 
@@ -102,35 +100,43 @@ export class FormStore extends PubSub {
   }
 
   setFieldsValueByInitData(name: string) {
-    const value = this.#initData?.[name];
-    if (!isNil(value)) {
-      this.#formData[name] = value;
+    const field = this.#fields.get(name);
+    if (field && !field.detail?.notRender && has(this.#initData, name)) {
+      const value = get(this.#initData, name);
+      set(this.#formData, name, value);
       this.publish(`${name}.init.value`, value);
     }
   }
 
   setFieldsValue(values: Record<string, unknown>, isEmitValuseChange = true) {
-    const newFormData: Record<string, unknown> = {
-      ...this.#formData,
-    };
-    Object.entries(values).forEach(([k, v]) => {
-      newFormData[k] = v;
-      this.#initData && (this.#initData[k] = v);
-      this.publish(`${k}.init.value`, v);
+    const newFormData = { ...this.#formData };
+    const changedValues: Record<string, unknown> = {};
+
+    this.#fields.forEach((field, key) => {
+      if (!field.detail?.notRender && has(values, key)) {
+        const v = get(values, key);
+        set(newFormData, key, v);
+        if (this.#initData) {
+          set(this.#initData, key, v);
+        }
+        this.publish(`${key}.init.value`, v);
+        set(changedValues, key, v);
+      }
     });
+
     this.#formData = newFormData;
 
     if (isEmitValuseChange) {
       this.#options?.onValuesChanged?.({
-        changedValues: values,
+        changedValues,
         allValues: this.getAllValues(),
       });
     }
   }
 
   resetFields(name?: string) {
     if (name) {
-      delete this.#formData[name];
+      unset(this.#formData, name);
       this.publish(`${name}.reset.fields`, null);
     } else {
       this.#formData = {};
@@ -141,7 +147,11 @@ export class FormStore extends PubSub {
 
   getFieldsValue(name?: string) {
     if (name) {
-      return this.#formData[name];
+      const field = this.#fields.get(name);
+      if (field && !field.detail?.notRender) {
+        return get(this.#formData, name);
+      }
+      return undefined;
     }
     return this.getAllValues();
   }
@@ -176,11 +186,21 @@ export class FormStore extends PubSub {
   }
 
   validateField(field: string | FieldDetail) {
-    const fieldDetail =
-      typeof field === "string" ? this.#fields.get(field)?.detail : field;
-    if (!fieldDetail) return;
+    let fieldDetail;
+    let fieldObj;
+
+    if (typeof field === "string") {
+      fieldObj = this.#fields.get(field);
+      fieldDetail = fieldObj?.detail;
+    } else {
+      fieldDetail = field;
+      fieldObj = this.#fields.get(fieldDetail.name);
+    }
+
+    if (!fieldDetail || (fieldObj && fieldObj.detail?.notRender)) return;
+
     const { name, label, validate } = fieldDetail;
-    const validateValue = this.#formData[name];
+    const validateValue = get(this.#formData, name);
 
     const messageBody = (message: string, type = "error") => {
       return {
@@ -193,7 +213,7 @@ export class FormStore extends PubSub {
 
     const valid = (
       validate: Validate,
-      value: string | number | null | undefined
+      value: string | number | null | undefined | object | Array<unknown>
     ): MessageBody => {
       const { required, pattern, message, type, min, max, validator } =
         validate;
@@ -271,7 +291,7 @@ export class FormStore extends PubSub {
       return messageBody("", "normal");
     };
 
-    const result = { name, ...valid(validate, validateValue as string) };
+    const result = { name, ...valid(validate, validateValue as any) };
     this.publish(`${name}.validate`, result);
     return result;
   }
