react-form-manage 1.1.0-beta.2 → 1.1.0-beta.4

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.1.0-beta.4] - 2026-03-04
+
+### Performance & Code Quality
+
+- **Performance Optimization**: Added `useShallow` to `useForm` hook's formInstance selector
+  - Prevents unnecessary re-renders when form instances array changes
+  - Uses shallow comparison for better performance in form instance lookup
+- **Code Cleanup**: Removed debug console.log statements
+  - Cleaned up FormItem component logging
+  - Cleaned up useFormItemControl cleanup logging
+- **Code Consistency**: Improved variable naming in Form provider
+  - Changed `externalFormInstance` references to unified `formInstance` variable
+  - Better code readability and maintainability
+
+### Technical Details
+
+- `useShallow` from Zustand improves selector performance by using shallow equality check
+- Removed unused `useEffect` import from FormItem component
+- All debug logs removed for production-ready code
+
+## [1.1.0-beta.3] - 2026-03-03
+
+### Type Fix
+
+- **PublicFormInstance.setFieldValues**: Corrected options parameter type from `SetFieldValueOptions` to `OnChangeOptions`
+  - `setFieldValues` does not support `deepTrigger` option (only available in `setFieldValue`)
+  - Now correctly reflects the actual implementation
+
+### Technical Details
+
+- `SetFieldValueOptions` extends `OnChangeOptions` with additional `deepTrigger?: boolean`
+- `setFieldValue` (singular): Supports `deepTrigger` for nested field updates
+- `setFieldValues` (plural): Batch updates without `deepTrigger` support
+
 ## [1.1.0-beta.2] - 2026-03-03
 
 ### Type Improvements

package/dist/components/Form/FormItem.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isNil } from "lodash";
-import { cloneElement, Fragment, useEffect, useRef, useState } from "react";
+import { cloneElement, Fragment, useRef, useState } from "react";
 import { v4 } from "uuid";
 import useFormItemControl from "../../hooks/useFormItemControl";
 function BaseFormItem({ children, name, elementRef: elRef, valuePropName, getValueFromEvent, onChange, value, isDirty, errors, onFocus, state, submitState, isTouched }) {
-  useEffect(() => {
-  }, [value]);
   return cloneElement(children, {
     name,
     ref: elRef,

package/dist/providers/Form.js

@@ -392,17 +392,17 @@ const InternalForm = function Form({ children, formName: externalFormName, form:
       submitState: "idle"
     });
     const formInstance = externalFormInstance != null ? externalFormInstance : {};
-    if (externalFormInstance) {
-      externalFormInstance.setFieldValue = setFieldValue;
-      externalFormInstance.setFieldValues = setFieldValues;
-      externalFormInstance.getFieldValue = getFieldValue;
-      externalFormInstance.getFieldValues = getFieldValues;
-      externalFormInstance.setFieldFocus = setFieldFocus;
-      externalFormInstance.getFieldErrors = getFieldErrors;
-      externalFormInstance.submit = runSubmit;
-      externalFormInstance.submitAsync = runSubmitAsync;
-      externalFormInstance.resetFields = resetFields;
-      externalFormInstance.formName = formName;
+    if (formInstance) {
+      formInstance.setFieldValue = setFieldValue;
+      formInstance.setFieldValues = setFieldValues;
+      formInstance.getFieldValue = getFieldValue;
+      formInstance.getFieldValues = getFieldValues;
+      formInstance.setFieldFocus = setFieldFocus;
+      formInstance.getFieldErrors = getFieldErrors;
+      formInstance.submit = runSubmit;
+      formInstance.submitAsync = runSubmitAsync;
+      formInstance.resetFields = resetFields;
+      formInstance.formName = formName;
     }
     setFormInstance(formInstance);
     return () => {
@@ -436,9 +436,9 @@ function useForm(formNameOrFormInstance) {
     return isNil(formNameOrFormInstance) ? formContext == null ? void 0 : formContext.formName : typeof formNameOrFormInstance === "object" && formNameOrFormInstance !== null ? formNameOrFormInstance.formName : formNameOrFormInstance;
   });
   const [initFormName] = useState(() => targetFormName != null ? targetFormName : v4());
-  const formInstance = useFormStore((state) => {
+  const formInstance = useFormStore(useShallow((state) => {
     return state.formInstances.find((i) => i.formName === initFormName);
-  });
+  }));
   const getFormInstance = useFormStore((state) => {
     return state.getFormInstance;
   });

package/dist/test/SelfTestGetForm.d.ts

@@ -0,0 +1,3 @@
+type Props = {};
+declare function SelfTestGetForm({}: Props): import("react/jsx-runtime").JSX.Element;
+export default SelfTestGetForm;

package/dist/test/SelfTestGetForm.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import Input from "../components/Input";
+import Form from "../providers/Form";
+function SelfTestGetForm({}) {
+  const [form] = Form.useForm("selfTestGetForm");
+  useEffect(() => {
+    setTimeout(() => {
+      if (form) {
+        form.setFieldValue("field1", "Value 1");
+      }
+    }, 1e3);
+  }, [form]);
+  return _jsxs(Form, { formName: "selfTestGetForm", children: [_jsx(Form.Item, { name: "field1", label: "Field 1", children: _jsx(Input, {}) }), _jsx(Form.Item, { name: "field2", label: "Field 2", children: _jsx(Input, {}) })] });
+}
+var stdin_default = SelfTestGetForm;
+export {
+  stdin_default as default
+};

package/dist/test/testFormInstance/TestCase8_TypeSafetyImprovements.js

@@ -73,8 +73,13 @@ function TestCase8_TypeSafetyImprovements() {
       render: (errors) => errors.length > 0 ? _jsx("div", { children: errors.map((err, idx) => _jsx("div", { style: { fontSize: 12 }, children: err.message }, idx)) }) : _jsx(Text, { type: "secondary", children: "No errors" })
     }
   ];
-  return _jsxs("div", { style: { padding: 24 }, children: [_jsx(Title, { level: 3, children: "TestCase8: Type Safety Improvements" }), _jsxs(Paragraph, { children: [_jsx(Text, { strong: true, children: "Test Focus:" }), " Verify type improvements trong PublicFormInstance"] }), _jsx(Paragraph, { children: _jsxs(Text, { type: "secondary", children: ["Test case n\xE0y validate c\xE1c type changes m\u1EDBi: dynamic field names ", `(keyof T |
-          (string & {}))`, ", getFieldErrors return type, v\xE0 submitAsync Promise", "<", "void", ">", "."] }) }), _jsx(Card, { title: "\u{1F4DD} Type Information", style: { marginBottom: 24 }, children: _jsxs("div", { style: { background: "#f5f5f5", padding: 16, fontFamily: "monospace", fontSize: 12 }, children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "Form Type:" }), " ", _jsxs(Text, { code: true, children: ["StrictFormValues = ", `{ username: string; email: string; age: number }`] })] }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Text, { strong: true, children: "New Types:" }) }), _jsxs("ul", { style: { marginLeft: 20, marginTop: 4 }, children: [_jsxs("li", { children: [_jsx(Text, { code: true, children: `name: keyof T | (string & {})` }), " - Supports dynamic fields"] }), _jsx("li", { children: _jsx(Text, { code: true, children: `getFieldErrors: (...) => Array<{ name: string; errors: FormFieldError[] }>` }) }), _jsx("li", { children: _jsx(Text, { code: true, children: `submitAsync: (...) => Promise<void>` }) })] })] }) }), _jsxs("div", { style: { display: "flex", gap: 24 }, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(Card, { title: "\u{1F3AE} Test Controls", children: _jsxs(Space, { direction: "vertical", style: { width: "100%" }, size: "middle", children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "1. Typed Field Names:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleSetTypedFields, type: "primary", block: true, children: "Set Typed Fields (username, email, age)" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "2. Dynamic Field Names:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleSetDynamicFields, block: true, children: "Set Dynamic Fields (not in type)" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "3. Get Values:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleGetValues, block: true, children: "Get All Field Values" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "4. Get Field Errors:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleGetFieldErrors, block: true, children: "Get Field Errors (New Type)" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "5. Multiple Values:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleGetMultipleValues, block: true, children: "Get Multiple Values" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "6. Submit Async:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsxs(Button, { onClick: handleSubmitAsync, type: "dashed", block: true, children: ["Test submitAsync (Promise", "<", "void", ">", ")"] }) })] }), _jsxs(Space, { style: { width: "100%", justifyContent: "space-between" }, children: [_jsx(Button, { onClick: clearLogs, size: "small", children: "Clear Logs" }), _jsx(Button, { onClick: clearErrors, size: "small", children: "Clear Errors" })] })] }) }) }), _jsx("div", { style: { flex: 1 }, children: _jsx(Card, { title: "\u{1F4CB} Action Logs", children: _jsx("div", { style: {
+  return _jsxs("div", { style: { padding: 24 }, children: [_jsx(Title, { level: 3, children: "TestCase8: Type Safety Improvements" }), _jsxs(Paragraph, { children: [_jsx(Text, { strong: true, children: "Test Focus:" }), " Verify type improvements trong PublicFormInstance"] }), _jsx(Paragraph, { children: _jsxs(Text, { type: "secondary", children: ["Test case n\xE0y validate c\xE1c type changes m\u1EDBi: dynamic field names", " ", `(keyof T |
+          (string & {}))`, ", getFieldErrors return type, v\xE0 submitAsync Promise", "<", "void", ">", "."] }) }), _jsx(Card, { title: "\u{1F4DD} Type Information", style: { marginBottom: 24 }, children: _jsxs("div", { style: {
+    background: "#f5f5f5",
+    padding: 16,
+    fontFamily: "monospace",
+    fontSize: 12
+  }, children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "Form Type:" }), " ", _jsxs(Text, { code: true, children: ["StrictFormValues =", " ", `{ username: string; email: string; age: number }`] })] }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Text, { strong: true, children: "New Types:" }) }), _jsxs("ul", { style: { marginLeft: 20, marginTop: 4 }, children: [_jsxs("li", { children: [_jsx(Text, { code: true, children: `name: keyof T | (string & {})` }), " - Supports dynamic fields"] }), _jsx("li", { children: _jsx(Text, { code: true, children: `getFieldErrors: (...) => Array<{ name: string; errors: FormFieldError[] }>` }) }), _jsx("li", { children: _jsx(Text, { code: true, children: `submitAsync: (...) => Promise<void>` }) })] })] }) }), _jsxs("div", { style: { display: "flex", gap: 24 }, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(Card, { title: "\u{1F3AE} Test Controls", children: _jsxs(Space, { direction: "vertical", style: { width: "100%" }, size: "middle", children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "1. Typed Field Names:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleSetTypedFields, type: "primary", block: true, children: "Set Typed Fields (username, email, age)" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "2. Dynamic Field Names:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleSetDynamicFields, block: true, children: "Set Dynamic Fields (not in type)" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "3. Get Values:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleGetValues, block: true, children: "Get All Field Values" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "4. Get Field Errors:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleGetFieldErrors, block: true, children: "Get Field Errors (New Type)" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "5. Multiple Values:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleGetMultipleValues, block: true, children: "Get Multiple Values" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "6. Submit Async:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsxs(Button, { onClick: handleSubmitAsync, type: "dashed", block: true, children: ["Test submitAsync (Promise", "<", "void", ">", ")"] }) })] }), _jsxs(Space, { style: { width: "100%", justifyContent: "space-between" }, children: [_jsx(Button, { onClick: clearLogs, size: "small", children: "Clear Logs" }), _jsx(Button, { onClick: clearErrors, size: "small", children: "Clear Errors" })] })] }) }) }), _jsx("div", { style: { flex: 1 }, children: _jsx(Card, { title: "\u{1F4CB} Action Logs", children: _jsx("div", { style: {
     height: 400,
     overflow: "auto",
     background: "#fafafa",
@@ -90,7 +95,7 @@ function TestCase8_TypeSafetyImprovements() {
   ], children: _jsx("input", { type: "email", placeholder: "Email", style: { padding: 8, width: "100%" } }) }), _jsx(Form.Item, { name: "age", label: "Age", rules: [
     { required: true, message: "Age is required" },
     { min: 18, message: "Must be at least 18" }
-  ], children: _jsx("input", { type: "number", placeholder: "Age", style: { padding: 8, width: "100%" } }) }), _jsx(Button, { type: "primary", htmlType: "submit", children: "Submit Form" })] }) }), fieldErrors.length > 0 && _jsxs(Card, { title: "\u{1F50D} Field Errors (getFieldErrors Result)", style: { marginTop: 24 }, children: [_jsx(Table, { dataSource: fieldErrors, columns: errorColumns, rowKey: "name", pagination: false, size: "small" }), _jsx("div", { style: { marginTop: 16, padding: 12, background: "#f0f0f0" }, children: _jsxs(Text, { type: "secondary", children: ["\u2705 Return type:", " ", _jsx(Text, { code: true, children: `Array<{ name: string; errors: FormFieldError[] }>` })] }) })] }), _jsxs("div", { style: { marginTop: 24, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "Expected Results:" }), _jsxs("ul", { children: [_jsx("li", { children: '\u2705 Click "Set Typed Fields" \u2192 Values set for username, email, age' }), _jsx("li", { children: '\u2705 Click "Set Dynamic Fields" \u2192 Dynamic fields work (not in StrictFormValues type)' }), _jsx("li", { children: '\u2705 Click "Get All Field Values" \u2192 Shows all field values including dynamic' }), _jsx("li", { children: '\u2705 Click "Get Field Errors" \u2192 Returns array with name and errors properties' }), _jsxs("li", { children: ['\u2705 Click "Get Multiple Values" \u2192 Returns array of ', `{ name, value }`, " objects"] }), _jsxs("li", { children: ['\u2705 Click "Test submitAsync" \u2192 Returns Promise', "<", "void", ">", " (result is undefined)"] }), _jsx("li", { children: "\u2705 Submit form with empty fields \u2192 Validation errors appear in getFieldErrors" }), _jsx("li", { children: "\u2705 Fill form and submit \u2192 onFinish triggered, no validation errors" })] })] }), _jsxs("div", { style: {
+  ], children: _jsx("input", { type: "number", placeholder: "Age", style: { padding: 8, width: "100%" } }) }), _jsx(Button, { type: "primary", htmlType: "submit", children: "Submit Form" })] }) }), fieldErrors.length > 0 && _jsxs(Card, { title: "\u{1F50D} Field Errors (getFieldErrors Result)", style: { marginTop: 24 }, children: [_jsx(Table, { dataSource: fieldErrors, columns: errorColumns, rowKey: "name", pagination: false, size: "small" }), _jsx("div", { style: { marginTop: 16, padding: 12, background: "#f0f0f0" }, children: _jsxs(Text, { type: "secondary", children: ["\u2705 Return type:", " ", _jsx(Text, { code: true, children: `Array<{ name: string; errors: FormFieldError[] }>` })] }) })] }), _jsxs("div", { style: { marginTop: 24, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "Expected Results:" }), _jsxs("ul", { children: [_jsx("li", { children: '\u2705 Click "Set Typed Fields" \u2192 Values set for username, email, age' }), _jsx("li", { children: '\u2705 Click "Set Dynamic Fields" \u2192 Dynamic fields work (not in StrictFormValues type)' }), _jsx("li", { children: '\u2705 Click "Get All Field Values" \u2192 Shows all field values including dynamic' }), _jsx("li", { children: '\u2705 Click "Get Field Errors" \u2192 Returns array with name and errors properties' }), _jsxs("li", { children: ['\u2705 Click "Get Multiple Values" \u2192 Returns array of', " ", `{ name, value }`, " objects"] }), _jsxs("li", { children: ['\u2705 Click "Test submitAsync" \u2192 Returns Promise', "<", "void", ">", " (result is undefined)"] }), _jsx("li", { children: "\u2705 Submit form with empty fields \u2192 Validation errors appear in getFieldErrors" }), _jsx("li", { children: "\u2705 Fill form and submit \u2192 onFinish triggered, no validation errors" })] })] }), _jsxs("div", { style: {
     marginTop: 16,
     padding: 16,
     background: "#e6f7ff",

package/dist/types/public.d.ts

@@ -1,4 +1,5 @@
 import type { SUBMIT_STATE } from "../constants/form";
+import { OnChangeOptions } from "../hooks/useFormItemControl";
 import { SetFieldValueOptions } from "../providers/Form";
 import type { GetConstantType } from "./util";
 export type FormValues<T = any> = T;
@@ -36,7 +37,7 @@ export interface PublicFormInstance<T = any> {
     submit: (values?: T) => void;
     submitAsync: (values?: T) => Promise<void>;
     setFieldValue: (name: keyof T | (string & {}), value: any, options?: SetFieldValueOptions) => void;
-    setFieldValues: (values: Partial<T>, options?: SetFieldValueOptions) => void;
+    setFieldValues: (values: Partial<T>, options?: OnChangeOptions) => void;
     getFieldValue: (name: keyof T | (string & {})) => any;
     getFieldValues: (names?: Array<keyof T | (string & {})>) => Array<{
         name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.1.0-beta.2",
+  "version": "1.1.0-beta.4",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",

package/src/App.tsx

@@ -1,9 +1,7 @@
 import Form from "./providers/Form";
 
 import { Form as AntdForm } from "antd";
-import TestSetValueInEffect from "./test/testSetValue/TestSetValueInEffect";
-import FormInstanceTestSuite from "./test/testFormInstance"; 
-import TestFormInstance from "./test/testFormInstance";
+import SelfTestGetForm from "./test/SelfTestGetForm";
 
 function TestFormWatch() {
   const watchValue = Form.useWatch("numericCode");
@@ -48,7 +46,9 @@ const App = () => {
       {/* <TestSetValueIndex /> */}
       {/* <TestSetValueInEffect /> */}
 
-      <FormInstanceTestSuite />
+      {/* <FormInstanceTestSuite /> */}
+
+      <SelfTestGetForm />
     </div>
   );
 };

package/src/components/Form/FormItem.tsx

@@ -1,6 +1,6 @@
 import { isNil } from "lodash";
 import type { ComponentProps, FC, ReactElement } from "react";
-import { cloneElement, Fragment, useEffect, useRef, useState } from "react";
+import { cloneElement, Fragment, useRef, useState } from "react";
 import { v4 } from "uuid";
 import useFormItemControl from "../../hooks/useFormItemControl";
 import type { ValidationRule } from "../../types/public";
@@ -47,9 +47,9 @@ function BaseFormItem({
   submitState,
   isTouched,
 }: any) {
-  useEffect(() => {
-    console.log("Base Form Item: ", { name, value });
-  }, [value]);
+  // useEffect(() => {
+  //   console.log("Base Form Item: ", { name, value });
+  // }, [value]);
   return cloneElement(children, {
     name,
     ref: elRef,

package/src/hooks/useFormItemControl.ts

@@ -598,7 +598,7 @@ export default function useFormItemControl<T = any>({
     return () => {
       revokeListener(formItemId, (listener, same) => {
         if (!same.length) {
-          console.log("Trigger after revoke: ", listener, same);
+          // console.log("Trigger after revoke: ", listener, same);
           clearObjKeyItem(listener.formName, listener.name);
         }
       });

package/src/providers/Form.tsx

@@ -768,17 +768,17 @@ const InternalForm: FormDeclearation = function Form<T = any>({
     });
 
     const formInstance = externalFormInstance ?? ({} as PublicFormInstance<T>);
-    if (externalFormInstance) {
-      externalFormInstance.setFieldValue = setFieldValue;
-      externalFormInstance.setFieldValues = setFieldValues;
-      externalFormInstance.getFieldValue = getFieldValue;
-      externalFormInstance.getFieldValues = getFieldValues;
-      externalFormInstance.setFieldFocus = setFieldFocus;
-      externalFormInstance.getFieldErrors = getFieldErrors;
-      externalFormInstance.submit = runSubmit;
-      externalFormInstance.submitAsync = runSubmitAsync;
-      externalFormInstance.resetFields = resetFields;
-      externalFormInstance.formName = formName;
+    if (formInstance) {
+      formInstance.setFieldValue = setFieldValue;
+      formInstance.setFieldValues = setFieldValues;
+      formInstance.getFieldValue = getFieldValue;
+      formInstance.getFieldValues = getFieldValues;
+      formInstance.setFieldFocus = setFieldFocus;
+      formInstance.getFieldErrors = getFieldErrors;
+      formInstance.submit = runSubmit;
+      formInstance.submitAsync = runSubmitAsync;
+      formInstance.resetFields = resetFields;
+      formInstance.formName = formName;
     }
 
     setFormInstance(formInstance);
@@ -859,9 +859,11 @@ export function useForm<T = any>(
   const [initFormName] = useState(() => targetFormName ?? v4());
 
   // Lấy formInstance từ store dựa trên initFormName
-  const formInstance = useFormStore((state) => {
-    return state.formInstances.find((i) => i.formName === initFormName);
-  }) as PublicFormInstance<T> | undefined;
+  const formInstance = useFormStore(
+    useShallow((state) => {
+      return state.formInstances.find((i) => i.formName === initFormName);
+    }),
+  ) as PublicFormInstance<T> | undefined;
 
   const getFormInstance = useFormStore((state) => {
     return state.getFormInstance;

package/src/test/SelfTestGetForm.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+import Input from "../components/Input";
+import Form from "../providers/Form";
+
+type Props = {};
+
+function SelfTestGetForm({}: Props) {
+  const [form] = Form.useForm("selfTestGetForm");
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (form) {
+        console.log("Form", form);
+        form.setFieldValue("field1", "Value 1");
+      }
+    }, 1000);
+  }, [form]);
+  return (
+    <Form formName="selfTestGetForm">
+      <Form.Item name="field1" label="Field 1">
+        <Input />
+      </Form.Item>
+      <Form.Item name="field2" label="Field 2">
+        <Input />
+      </Form.Item>
+    </Form>
+  );
+}
+
+export default SelfTestGetForm;

package/src/test/testFormInstance/TestCase7_SetValueInEffect.tsx

@@ -6,13 +6,13 @@ const { Title, Paragraph, Text } = Typography;
 
 /**
  * TestCase7: Set Value in useEffect with Timeout
- * 
+ *
  * Mô tả:
  * - Test scenario: setValue được gọi trong useEffect với setTimeout
  * - Form instance được tạo trước và truyền vào Form component
  * - Timeout được khởi tạo ngay khi component mount
  * - Test xem setValue có hoạt động sau khi timeout trigger
- * 
+ *
  * Expected Behavior:
  * - setTimeout được tạo ngay khi component mount
  * - Sau thời gian timeout, setValue được gọi và hoạt động bình thường
@@ -41,11 +41,11 @@ function FormWithTimeout({ delay = 2000 }: { delay?: number }) {
 
     const timer = setTimeout(() => {
       addLog("🔔 Timeout triggered! Calling setFieldValue...");
-      
+
       form.setFieldValue("username", "admin_from_timeout");
       form.setFieldValue("email", "admin@timeout.com");
       form.setFieldValue("status", "loaded");
-      
+
       addLog("✅ setFieldValue completed successfully");
       setTimeoutTriggered(true);
     }, delay);
@@ -185,9 +185,10 @@ export default function TestCase7_SetValueInEffect() {
 
       <Paragraph>
         <Text type="secondary">
-          Test case này verify rằng form instance methods vẫn hoạt động bình thường khi
-          được gọi từ async callbacks (setTimeout). Timeout được tạo ngay khi component
-          mount, và sau khi trigger, setValue phải hoạt động chính xác.
+          Test case này verify rằng form instance methods vẫn hoạt động bình
+          thường khi được gọi từ async callbacks (setTimeout). Timeout được tạo
+          ngay khi component mount, và sau khi trigger, setValue phải hoạt động
+          chính xác.
         </Text>
       </Paragraph>
 
@@ -239,8 +240,8 @@ export default function TestCase7_SetValueInEffect() {
           }}
         >
           <Text>
-            💡 <strong>Tip:</strong> Try unmounting the component before timeout triggers
-            to test cleanup behavior
+            💡 <strong>Tip:</strong> Try unmounting the component before timeout
+            triggers to test cleanup behavior
           </Text>
         </div>
       </Card>
@@ -253,22 +254,24 @@ export default function TestCase7_SetValueInEffect() {
         <Title level={5}>Expected Results:</Title>
         <ul>
           <li>
-            ✅ Component mounts → Logs show "setTimeout created with {delay}ms delay"
+            ✅ Component mounts → Logs show "setTimeout created with {delay}ms
+            delay"
           </li>
           <li>
-            ✅ After {delay}ms → Logs show "Timeout triggered!" and "setFieldValue
-            completed successfully"
+            ✅ After {delay}ms → Logs show "Timeout triggered!" and
+            "setFieldValue completed successfully"
           </li>
           <li>✅ Form values update to: username="admin_from_timeout", etc.</li>
           <li>✅ Click "Manual Set" → Values change immediately</li>
           <li>✅ Click "Reset" → Form resets to initialValues</li>
           <li>
-            ✅ Click "Unmount" before timeout → Logs show cleanup, no error when timeout
-            would trigger
+            ✅ Click "Unmount" before timeout → Logs show cleanup, no error when
+            timeout would trigger
           </li>
           <li>✅ Change delay and remount → New timeout with new delay</li>
           <li>
-            ✅ Submit form after timeout → Form submission works with updated values
+            ✅ Submit form after timeout → Form submission works with updated
+            values
           </li>
         </ul>
       </div>
@@ -284,21 +287,24 @@ export default function TestCase7_SetValueInEffect() {
         <Title level={5}>Use Cases:</Title>
         <ul style={{ marginBottom: 0 }}>
           <li>
-            <strong>Async Data Loading:</strong> Load form data from API after component
-            mount
+            <strong>Async Data Loading:</strong> Load form data from API after
+            component mount
           </li>
           <li>
-            <strong>Delayed Initialization:</strong> Initialize form values after some
-            delay
+            <strong>Delayed Initialization:</strong> Initialize form values
+            after some delay
           </li>
           <li>
-            <strong>Auto-save:</strong> Save form values periodically using setInterval
+            <strong>Auto-save:</strong> Save form values periodically using
+            setInterval
           </li>
           <li>
-            <strong>Debounced Updates:</strong> Update form values with debounce/throttle
+            <strong>Debounced Updates:</strong> Update form values with
+            debounce/throttle
           </li>
           <li>
-            <strong>WebSocket Updates:</strong> Update form when receiving real-time data
+            <strong>WebSocket Updates:</strong> Update form when receiving
+            real-time data
           </li>
         </ul>
       </div>

package/src/test/testFormInstance/TestCase8_TypeSafetyImprovements.tsx

@@ -6,13 +6,13 @@ const { Title, Paragraph, Text } = Typography;
 
 /**
  * TestCase8: Type Safety Improvements
- * 
+ *
  * Mô tả:
  * - Test type improvements trong PublicFormInstance
  * - Dynamic field names: keyof T | (string & {})
  * - getFieldErrors return type: Array<{ name: string; errors: FormFieldError[] }>
  * - submitAsync return type: Promise<void>
- * 
+ *
  * Expected Behavior:
  * - Dynamic field names hoạt động với typed và untyped fields
  * - getFieldErrors trả về array với proper structure
@@ -60,8 +60,10 @@ export default function TestCase8_TypeSafetyImprovements() {
     const email = form.getFieldValue("email");
     const age = form.getFieldValue("age");
     const dynamic = form.getFieldValue("dynamicField1" as any);
-    
-    addLog(`📖 Get values: username=${username}, email=${email}, age=${age}, dynamic=${dynamic}`);
+
+    addLog(
+      `📖 Get values: username=${username}, email=${email}, age=${age}, dynamic=${dynamic}`,
+    );
   };
 
   // Test 4: Get field errors (NEW TYPE)
@@ -78,7 +80,9 @@ export default function TestCase8_TypeSafetyImprovements() {
       addLog("🚀 Calling submitAsync...");
       const result = await form.submitAsync();
       // result should be void (undefined)
-      addLog(`✅ submitAsync completed. Result type: ${typeof result} (should be undefined)`);
+      addLog(
+        `✅ submitAsync completed. Result type: ${typeof result} (should be undefined)`,
+      );
       console.log("submitAsync result:", result);
     } catch (error) {
       addLog(`❌ submitAsync error: ${error}`);
@@ -112,7 +116,11 @@ export default function TestCase8_TypeSafetyImprovements() {
       dataIndex: "errors",
       key: "count",
       render: (errors: any[]) => (
-        <Badge count={errors.length} showZero color={errors.length > 0 ? "red" : "green"} />
+        <Badge
+          count={errors.length}
+          showZero
+          color={errors.length > 0 ? "red" : "green"}
+        />
       ),
     },
     {
@@ -139,32 +147,48 @@ export default function TestCase8_TypeSafetyImprovements() {
       <Title level={3}>TestCase8: Type Safety Improvements</Title>
 
       <Paragraph>
-        <Text strong>Test Focus:</Text> Verify type improvements trong PublicFormInstance
+        <Text strong>Test Focus:</Text> Verify type improvements trong
+        PublicFormInstance
       </Paragraph>
 
       <Paragraph>
         <Text type="secondary">
-          Test case này validate các type changes mới: dynamic field names {`(keyof T |
-          (string & {}))`}, getFieldErrors return type, và submitAsync Promise{'<'}void{'>'}.
+          Test case này validate các type changes mới: dynamic field names{" "}
+          {`(keyof T |
+          (string & {}))`}
+          , getFieldErrors return type, và submitAsync Promise{"<"}void{">"}.
         </Text>
       </Paragraph>
 
       {/* Type Info Panel */}
       <Card title="📝 Type Information" style={{ marginBottom: 24 }}>
-        <div style={{ background: "#f5f5f5", padding: 16, fontFamily: "monospace", fontSize: 12 }}>
+        <div
+          style={{
+            background: "#f5f5f5",
+            padding: 16,
+            fontFamily: "monospace",
+            fontSize: 12,
+          }}
+        >
           <div>
             <Text strong>Form Type:</Text>{" "}
-            <Text code>StrictFormValues = {`{ username: string; email: string; age: number }`}</Text>
+            <Text code>
+              StrictFormValues ={" "}
+              {`{ username: string; email: string; age: number }`}
+            </Text>
           </div>
           <div style={{ marginTop: 8 }}>
             <Text strong>New Types:</Text>
           </div>
           <ul style={{ marginLeft: 20, marginTop: 4 }}>
             <li>
-              <Text code>{`name: keyof T | (string & {})`}</Text> - Supports dynamic fields
+              <Text code>{`name: keyof T | (string & {})`}</Text> - Supports
+              dynamic fields
             </li>
             <li>
-              <Text code>{`getFieldErrors: (...) => Array<{ name: string; errors: FormFieldError[] }>`}</Text>
+              <Text
+                code
+              >{`getFieldErrors: (...) => Array<{ name: string; errors: FormFieldError[] }>`}</Text>
             </li>
             <li>
               <Text code>{`submitAsync: (...) => Promise<void>`}</Text>
@@ -227,7 +251,7 @@ export default function TestCase8_TypeSafetyImprovements() {
                 <Text strong>6. Submit Async:</Text>
                 <div style={{ marginTop: 8 }}>
                   <Button onClick={handleSubmitAsync} type="dashed" block>
-                    Test submitAsync (Promise{'<'}void{'>'})
+                    Test submitAsync (Promise{"<"}void{">"})
                   </Button>
                 </div>
               </div>
@@ -287,7 +311,11 @@ export default function TestCase8_TypeSafetyImprovements() {
             label="Username"
             rules={[{ required: true, message: "Username is required" }]}
           >
-            <input type="text" placeholder="Username" style={{ padding: 8, width: "100%" }} />
+            <input
+              type="text"
+              placeholder="Username"
+              style={{ padding: 8, width: "100%" }}
+            />
           </Form.Item>
 
           <Form.Item
@@ -298,7 +326,11 @@ export default function TestCase8_TypeSafetyImprovements() {
               { isEmail: true, message: "Invalid email format" },
             ]}
           >
-            <input type="email" placeholder="Email" style={{ padding: 8, width: "100%" }} />
+            <input
+              type="email"
+              placeholder="Email"
+              style={{ padding: 8, width: "100%" }}
+            />
           </Form.Item>
 
           <Form.Item
@@ -309,7 +341,11 @@ export default function TestCase8_TypeSafetyImprovements() {
               { min: 18, message: "Must be at least 18" },
             ]}
           >
-            <input type="number" placeholder="Age" style={{ padding: 8, width: "100%" }} />
+            <input
+              type="number"
+              placeholder="Age"
+              style={{ padding: 8, width: "100%" }}
+            />
           </Form.Item>
 
           <Button type="primary" htmlType="submit">
@@ -320,7 +356,10 @@ export default function TestCase8_TypeSafetyImprovements() {
 
       {/* Field Errors Table */}
       {fieldErrors.length > 0 && (
-        <Card title="🔍 Field Errors (getFieldErrors Result)" style={{ marginTop: 24 }}>
+        <Card
+          title="🔍 Field Errors (getFieldErrors Result)"
+          style={{ marginTop: 24 }}
+        >
           <Table
             dataSource={fieldErrors}
             columns={errorColumns}
@@ -331,7 +370,9 @@ export default function TestCase8_TypeSafetyImprovements() {
           <div style={{ marginTop: 16, padding: 12, background: "#f0f0f0" }}>
             <Text type="secondary">
               ✅ Return type:{" "}
-              <Text code>{`Array<{ name: string; errors: FormFieldError[] }>`}</Text>
+              <Text
+                code
+              >{`Array<{ name: string; errors: FormFieldError[] }>`}</Text>
             </Text>
           </div>
         </Card>
@@ -340,20 +381,36 @@ export default function TestCase8_TypeSafetyImprovements() {
       <div style={{ marginTop: 24, padding: 16, background: "#f5f5f5" }}>
         <Title level={5}>Expected Results:</Title>
         <ul>
-          <li>✅ Click "Set Typed Fields" → Values set for username, email, age</li>
           <li>
-            ✅ Click "Set Dynamic Fields" → Dynamic fields work (not in StrictFormValues type)
+            ✅ Click "Set Typed Fields" → Values set for username, email, age
+          </li>
+          <li>
+            ✅ Click "Set Dynamic Fields" → Dynamic fields work (not in
+            StrictFormValues type)
+          </li>
+          <li>
+            ✅ Click "Get All Field Values" → Shows all field values including
+            dynamic
+          </li>
+          <li>
+            ✅ Click "Get Field Errors" → Returns array with name and errors
+            properties
+          </li>
+          <li>
+            ✅ Click "Get Multiple Values" → Returns array of{" "}
+            {`{ name, value }`} objects
+          </li>
+          <li>
+            ✅ Click "Test submitAsync" → Returns Promise{"<"}void{">"} (result
+            is undefined)
           </li>
-          <li>✅ Click "Get All Field Values" → Shows all field values including dynamic</li>
           <li>
-            ✅ Click "Get Field Errors" → Returns array with name and errors properties
+            ✅ Submit form with empty fields → Validation errors appear in
+            getFieldErrors
           </li>
-          <li>✅ Click "Get Multiple Values" → Returns array of {`{ name, value }`} objects</li>
           <li>
-            ✅ Click "Test submitAsync" → Returns Promise{'<'}void{'>'} (result is undefined)
+            ✅ Fill form and submit → onFinish triggered, no validation errors
           </li>
-          <li>✅ Submit form with empty fields → Validation errors appear in getFieldErrors</li>
-          <li>✅ Fill form and submit → onFinish triggered, no validation errors</li>
         </ul>
       </div>
 
@@ -368,20 +425,22 @@ export default function TestCase8_TypeSafetyImprovements() {
         <Title level={5}>Type Improvements Summary:</Title>
         <ul style={{ marginBottom: 0 }}>
           <li>
-            <strong>Dynamic Field Names:</strong> <Text code>{`keyof T | (string & {})`}</Text> cho
-            phép sử dụng động field names không có trong type
+            <strong>Dynamic Field Names:</strong>{" "}
+            <Text code>{`keyof T | (string & {})`}</Text> cho phép sử dụng động
+            field names không có trong type
           </li>
           <li>
-            <strong>Proper getFieldErrors Type:</strong> Trả về array thay vì Record, chính xác
-            với implementation
+            <strong>Proper getFieldErrors Type:</strong> Trả về array thay vì
+            Record, chính xác với implementation
           </li>
           <li>
-            <strong>submitAsync Type:</strong> <Text code>{`Promise<void>`}</Text> thay vì{" "}
+            <strong>submitAsync Type:</strong>{" "}
+            <Text code>{`Promise<void>`}</Text> thay vì{" "}
             <Text code>{`Promise<any>`}</Text> for better type safety
           </li>
           <li>
-            <strong>Consistency:</strong> Tất cả methods giờ support cùng type pattern cho field
-            names
+            <strong>Consistency:</strong> Tất cả methods giờ support cùng type
+            pattern cho field names
           </li>
         </ul>
       </div>

package/src/test/testFormInstance/index.tsx

@@ -124,8 +124,8 @@ export default function FormInstanceTestSuite() {
           </li>
           <li>
             <Text strong>Type Improvements:</Text> Dynamic field names{" "}
-            <Text code>{`keyof T | (string & {})`}</Text>, proper getFieldErrors return
-            type, submitAsync <Text code>Promise&lt;void&gt;</Text>
+            <Text code>{`keyof T | (string & {})`}</Text>, proper getFieldErrors
+            return type, submitAsync <Text code>Promise&lt;void&gt;</Text>
           </li>
         </ul>
       </div>

package/src/types/public.ts

@@ -1,4 +1,5 @@
 import type { SUBMIT_STATE } from "../constants/form";
+import { OnChangeOptions } from "../hooks/useFormItemControl";
 import { SetFieldValueOptions } from "../providers/Form";
 import type { GetConstantType } from "./util";
 
@@ -44,7 +45,7 @@ export interface PublicFormInstance<T = any> {
     value: any,
     options?: SetFieldValueOptions,
   ) => void;
-  setFieldValues: (values: Partial<T>, options?: SetFieldValueOptions) => void;
+  setFieldValues: (values: Partial<T>, options?: OnChangeOptions) => void;
   getFieldValue: (name: keyof T | (string & {})) => any;
   getFieldValues: (
     names?: Array<keyof T | (string & {})>,