react-form-manage 1.0.8 → 1.1.0-beta.1

package/dist/test/testFormInstance/TestCase5_UseFormUtils.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Space, Typography, Card, Input, message } from "antd";
+import { useState } from "react";
+import Form from "../../providers/Form";
+const { Title, Paragraph, Text } = Typography;
+function ControlPanel() {
+  const { getFormInstance, setFieldValue, setFieldValues } = Form.useFormUtils();
+  const [targetFormName, setTargetFormName] = useState("form1");
+  const handleSetSingleValue = () => {
+    try {
+      setFieldValue(targetFormName, "username", "admin");
+      message.success(`Set username='admin' for ${targetFormName}`);
+    } catch (error) {
+      message.error(error.message);
+    }
+  };
+  const handleSetMultipleValues = () => {
+    try {
+      setFieldValues(targetFormName, {
+        username: "john_doe",
+        email: "john@example.com"
+      });
+      message.success(`Set multiple values for ${targetFormName}`);
+    } catch (error) {
+      message.error(error.message);
+    }
+  };
+  const handleGetFormInstance = () => {
+    try {
+      const formInstance = getFormInstance(targetFormName);
+      message.info("Check console for form instance details");
+    } catch (error) {
+      message.error(error.message);
+    }
+  };
+  const handleReset = () => {
+    try {
+      const formInstance = getFormInstance(targetFormName);
+      formInstance == null ? void 0 : formInstance.resetFields();
+      message.success(`Reset ${targetFormName}`);
+    } catch (error) {
+      message.error(error.message);
+    }
+  };
+  const handleSubmit = () => {
+    try {
+      const formInstance = getFormInstance(targetFormName);
+      formInstance == null ? void 0 : formInstance.submit();
+      message.info(`Submitting ${targetFormName}`);
+    } catch (error) {
+      message.error(error.message);
+    }
+  };
+  return _jsxs(Card, { title: "\u{1F3AE} Control Panel (useFormUtils)", style: { marginBottom: 24 }, extra: _jsxs(Space, { children: [_jsx(Text, { children: "Target Form:" }), _jsx(Input, { value: targetFormName, onChange: (e) => setTargetFormName(e.target.value), placeholder: "Enter form name", style: { width: 150 } })] }), children: [_jsxs(Space, { wrap: true, children: [_jsx(Button, { onClick: handleSetSingleValue, type: "primary", children: "Set Single Value" }), _jsx(Button, { onClick: handleSetMultipleValues, type: "primary", children: "Set Multiple Values" }), _jsx(Button, { onClick: handleGetFormInstance, children: "Get Form Instance" }), _jsx(Button, { onClick: handleReset, danger: true, children: "Reset Form" }), _jsx(Button, { onClick: handleSubmit, type: "dashed", children: "Submit Form" })] }), _jsx("div", { style: { marginTop: 16, padding: 12, background: "#f0f0f0" }, children: _jsx(Text, { type: "secondary", children: '\u{1F4A1} Tip: Change the target form name to "form1" or "form2" to control different forms' }) })] });
+}
+function TestCase5_UseFormUtils() {
+  return _jsxs("div", { style: { padding: 24 }, children: [_jsx(Title, { level: 3, children: "TestCase5: useFormUtils Hook" }), _jsxs(Paragraph, { children: [_jsx(Text, { strong: true, children: "New Hook:" }), " Form.useFormUtils() cho ph\xE9p thao t\xE1c v\u1EDBi form t\u1EEB b\xEAn ngo\xE0i"] }), _jsx(Paragraph, { children: _jsx(Text, { type: "secondary", children: "Hook n\xE0y cung c\u1EA5p c\xE1c utility methods \u0111\u1EC3 get/set form values t\u1EEB b\u1EA5t k\u1EF3 \u0111\xE2u trong app, kh\xF4ng c\u1EA7n ph\u1EA3i \u1EDF trong Form context. H\u1EEFu \xEDch cho global control panels, external triggers, ho\u1EB7c cross-component form manipulation." }) }), _jsx(ControlPanel, {}), _jsxs("div", { style: { display: "flex", gap: 24 }, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(Card, { title: "Form 1 (formName='form1')", children: _jsxs(Form, { formName: "form1", initialValues: { username: "", email: "" }, onFinish: (values) => {
+    message.success(`Form 1 submitted: ${JSON.stringify(values)}`);
+  }, children: [_jsx(Form.Item, { name: "username", label: "Username", children: _jsx(Input, { placeholder: "Username" }) }), _jsx(Form.Item, { name: "email", label: "Email", children: _jsx(Input, { type: "email", placeholder: "Email" }) }), _jsx(Button, { type: "primary", htmlType: "submit", children: "Submit Form 1" })] }) }) }), _jsx("div", { style: { flex: 1 }, children: _jsx(Card, { title: "Form 2 (formName='form2')", children: _jsxs(Form, { formName: "form2", initialValues: { username: "", email: "" }, onFinish: (values) => {
+    message.success(`Form 2 submitted: ${JSON.stringify(values)}`);
+  }, children: [_jsx(Form.Item, { name: "username", label: "Username", children: _jsx(Input, { placeholder: "Username" }) }), _jsx(Form.Item, { name: "email", label: "Email", children: _jsx(Input, { type: "email", placeholder: "Email" }) }), _jsx(Button, { type: "primary", htmlType: "submit", children: "Submit Form 2" })] }) }) })] }), _jsxs("div", { style: { marginTop: 24, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "Expected Results:" }), _jsxs("ul", { children: [_jsx("li", { children: '\u2705 Control panel starts with target "form1"' }), _jsx("li", { children: `\u2705 Click "Set Single Value" \u2192 Form 1's username field updates to "admin"` }), _jsx("li", { children: `\u2705 Click "Set Multiple Values" \u2192 Form 1's both fields update` }), _jsx("li", { children: '\u2705 Click "Get Form Instance" \u2192 Console logs form instance and current values' }), _jsx("li", { children: '\u2705 Change target to "form2" in input' }), _jsx("li", { children: `\u2705 Click "Set Single Value" \u2192 Form 2's username field updates` }), _jsx("li", { children: '\u2705 Click "Reset Form" \u2192 Target form resets to initialValues' }), _jsx("li", { children: '\u2705 Click "Submit Form" \u2192 Target form submits programmatically' }), _jsx("li", { children: '\u26A0\uFE0F Enter invalid formName \u2192 Error message shows "Form instance not found"' })] })] }), _jsxs("div", { style: { marginTop: 16, padding: 16, background: "#e6f7ff", border: "1px solid #91d5ff" }, children: [_jsx(Title, { level: 5, children: "Use Cases:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsx("li", { children: "Global control panels \u0111\u1EC3 qu\u1EA3n l\xFD multiple forms" }), _jsx("li", { children: "External triggers (t\u1EEB API response, WebSocket, events...)" }), _jsx("li", { children: "Cross-component form manipulation" }), _jsx("li", { children: "Testing v\xE0 debugging tools" }), _jsx("li", { children: "Admin dashboards v\u1EDBi form management" })] })] })] });
+}
+export {
+  TestCase5_UseFormUtils as default
+};

package/dist/test/testFormInstance/TestCase6_FormWithoutWrapper.d.ts

@@ -0,0 +1,15 @@
+/**
+ * TestCase6: Form Without Wrapper Component
+ *
+ * Mô tả:
+ * - Test use case: Sử dụng form methods mà không cần render Form component
+ * - Form instance có thể được sử dụng độc lập để quản lý state
+ * - Hữu ích cho: custom form implementations, headless forms, non-standard UI
+ *
+ * Expected Behavior:
+ * - Form instance hoạt động như một state manager
+ * - Có thể set/get values mà không cần Form component
+ * - Có thể dùng Form.useWatch để reactive update
+ * - Warning được log vì không có Form component để validate
+ */
+export default function TestCase6_FormWithoutWrapper(): import("react/jsx-runtime").JSX.Element;

package/dist/test/testFormInstance/TestCase6_FormWithoutWrapper.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, Input, Space, Typography } from "antd";
+import { useState } from "react";
+import Form from "../../providers/Form";
+const { Title, Paragraph, Text } = Typography;
+function TestCase6_FormWithoutWrapper() {
+  const [form] = Form.useForm();
+  const firstName = Form.useWatch("firstName", form);
+  const lastName = Form.useWatch("lastName", form);
+  const age = Form.useWatch("age", form);
+  const [manualFirstName, setManualFirstName] = useState("");
+  const [manualLastName, setManualLastName] = useState("");
+  const [manualAge, setManualAge] = useState("");
+  const handleSetFromManualInputs = () => {
+    form.setFieldValue("firstName", manualFirstName);
+    form.setFieldValue("lastName", manualLastName);
+    form.setFieldValue("age", Number(manualAge) || 0);
+  };
+  const handleSetBatch = () => {
+    form.setFieldValues({
+      firstName: "John",
+      lastName: "Doe",
+      age: 30
+    });
+  };
+  const handleGetValues = () => {
+    const values = {
+      firstName: form.getFieldValue("firstName"),
+      lastName: form.getFieldValue("lastName"),
+      age: form.getFieldValue("age")
+    };
+    alert(JSON.stringify(values, null, 2));
+  };
+  const handleReset = () => {
+    form.resetFields();
+  };
+  const handleSubmit = () => {
+    form.submit();
+  };
+  const fullName = `${firstName || ""} ${lastName || ""}`.trim() || "(empty)";
+  return _jsxs("div", { style: { padding: 24 }, children: [_jsx(Title, { level: 3, children: "TestCase6: Form Without Wrapper Component" }), _jsxs(Paragraph, { children: [_jsx(Text, { strong: true, children: "Use Case:" }), " S\u1EED d\u1EE5ng form instance nh\u01B0 state manager m\xE0 kh\xF4ng c\u1EA7n Form component"] }), _jsx(Paragraph, { children: _jsx(Text, { type: "secondary", children: "Form instance c\xF3 th\u1EC3 ho\u1EA1t \u0111\u1ED9ng \u0111\u1ED9c l\u1EADp nh\u01B0 m\u1ED9t state manager. H\u1EEFu \xEDch cho custom form implementations, headless forms, ho\u1EB7c khi b\u1EA1n mu\u1ED1n t\u1EF1 build UI m\xE0 kh\xF4ng d\xF9ng Form component wrapper." }) }), _jsxs("div", { style: { display: "flex", gap: 24 }, children: [_jsx(Card, { title: "\u{1F4DD} Manual Inputs (Not Connected to Form)", style: { flex: 1 }, children: _jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "First Name:" }), _jsx(Input, { value: manualFirstName, onChange: (e) => setManualFirstName(e.target.value), placeholder: "Enter first name" })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "Last Name:" }), _jsx(Input, { value: manualLastName, onChange: (e) => setManualLastName(e.target.value), placeholder: "Enter last name" })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "Age:" }), _jsx(Input, { type: "number", value: manualAge, onChange: (e) => setManualAge(e.target.value), placeholder: "Enter age" })] }), _jsx(Button, { type: "primary", onClick: handleSetFromManualInputs, block: true, children: "Set Form Values" })] }) }), _jsx(Card, { title: "\u{1F441}\uFE0F Form State (via useWatch)", style: { flex: 1 }, children: _jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "First Name: " }), _jsx(Text, { code: true, children: firstName || "(empty)" })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "Last Name: " }), _jsx(Text, { code: true, children: lastName || "(empty)" })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "Age: " }), _jsx(Text, { code: true, children: age != null ? age : "(empty)" })] }), _jsxs("div", { style: { marginTop: 16, padding: 12, background: "#f0f0f0" }, children: [_jsx(Text, { strong: true, children: "Computed Full Name: " }), _jsx(Text, { style: { fontSize: 16 }, children: fullName })] })] }) })] }), _jsxs(Card, { title: "\u{1F3AE} Form Controls", style: { marginTop: 24 }, children: [_jsxs(Space, { wrap: true, children: [_jsx(Button, { onClick: handleSetBatch, type: "primary", children: "Set Batch Values (John Doe, 30)" }), _jsx(Button, { onClick: handleGetValues, children: "Get All Values (Alert)" }), _jsx(Button, { onClick: handleReset, danger: true, children: "Reset Form" }), _jsx(Button, { onClick: handleSubmit, type: "dashed", children: "Submit Form (Will Log Warning)" })] }), _jsxs("div", { style: { marginTop: 16, padding: 12, background: "#fff7e6", border: "1px solid #ffd591" }, children: [_jsx(Text, { strong: true, children: "\u26A0\uFE0F Note: " }), _jsx(Text, { children: "Kh\xF4ng c\xF3 Form component \u0111\u01B0\u1EE3c render. Form instance ho\u1EA1t \u0111\u1ED9ng nh\u01B0 pure state manager. Submit s\u1EBD log warning v\xEC kh\xF4ng c\xF3 onFinish handler." })] })] }), _jsxs("div", { style: { marginTop: 24, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "Expected Results:" }), _jsxs("ul", { children: [_jsx("li", { children: "\u2705 Type in manual inputs \u2192 Values NOT auto-sync to form state" }), _jsx("li", { children: '\u2705 Click "Set Form Values" \u2192 Form state updates, display panel shows new values' }), _jsx("li", { children: "\u2705 Display panel updates reactively via useWatch" }), _jsx("li", { children: '\u2705 Click "Set Batch Values" \u2192 All fields update at once' }), _jsx("li", { children: '\u2705 Click "Get All Values" \u2192 Alert shows current form values' }), _jsx("li", { children: '\u2705 Click "Reset Form" \u2192 All fields reset (empty)' }), _jsx("li", { children: "\u2705 Computed Full Name updates based on firstName + lastName" }), _jsx("li", { children: '\u26A0\uFE0F Click "Submit Form" \u2192 Console shows warning (no Form component mounted)' })] })] }), _jsxs("div", { style: { marginTop: 16, padding: 16, background: "#e6f7ff", border: "1px solid #91d5ff" }, children: [_jsx(Title, { level: 5, children: "Use Cases:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Headless Forms:" }), " Build custom UI m\xE0 kh\xF4ng b\u1ECB constraint b\u1EDFi Form component"] }), _jsxs("li", { children: [_jsx("strong", { children: "State Manager:" }), " S\u1EED d\u1EE5ng nh\u01B0 lightweight state manager v\u1EDBi validation support"] }), _jsxs("li", { children: [_jsx("strong", { children: "Multi-step Forms:" }), " Qu\u1EA3n l\xFD form state across multiple steps/pages"] }), _jsxs("li", { children: [_jsx("strong", { children: "Form Wizards:" }), " Share form instance between different wizard steps"] }), _jsxs("li", { children: [_jsx("strong", { children: "Custom Integrations:" }), " Integrate v\u1EDBi third-party UI libraries"] })] })] })] });
+}
+export {
+  TestCase6_FormWithoutWrapper as default
+};

package/dist/test/testFormInstance/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Form Instance Test Suite
+ *
+ * Test suite cho breaking changes và new features liên quan đến Form Instance:
+ * - Form component nhận prop "form" thay vì chỉ có "formName"
+ * - Auto-generate UUID cho formName
+ * - Safe form methods với proxy instance
+ * - useForm trả về [instance, isReady] tuple
+ * - useFormUtils hook mới
+ * - Form instance hoạt động độc lập như state manager
+ */
+export default function FormInstanceTestSuite(): import("react/jsx-runtime").JSX.Element;

package/dist/test/testFormInstance/index.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs, Typography } from "antd";
+import { useState } from "react";
+import TestCase1_FormWithInstance from "./TestCase1_FormWithInstance";
+import TestCase2_AutoGenerateFormName from "./TestCase2_AutoGenerateFormName";
+import TestCase3_SafeFormMethods from "./TestCase3_SafeFormMethods";
+import TestCase4_UseFormStatusFlag from "./TestCase4_UseFormStatusFlag";
+import TestCase5_UseFormUtils from "./TestCase5_UseFormUtils";
+import TestCase6_FormWithoutWrapper from "./TestCase6_FormWithoutWrapper";
+const { Title, Paragraph, Text } = Typography;
+function FormInstanceTestSuite() {
+  const [activeTab, setActiveTab] = useState("1");
+  const items = [
+    {
+      key: "1",
+      label: "TestCase1: Form with Instance",
+      children: _jsx(TestCase1_FormWithInstance, {})
+    },
+    {
+      key: "2",
+      label: "TestCase2: Auto-generate FormName",
+      children: _jsx(TestCase2_AutoGenerateFormName, {})
+    },
+    {
+      key: "3",
+      label: "TestCase3: Safe Form Methods",
+      children: _jsx(TestCase3_SafeFormMethods, {})
+    },
+    {
+      key: "4",
+      label: "TestCase4: useForm Status Flag",
+      children: _jsx(TestCase4_UseFormStatusFlag, {})
+    },
+    {
+      key: "5",
+      label: "TestCase5: useFormUtils Hook",
+      children: _jsx(TestCase5_UseFormUtils, {})
+    },
+    {
+      key: "6",
+      label: "TestCase6: Form Without Wrapper",
+      children: _jsx(TestCase6_FormWithoutWrapper, {})
+    }
+  ];
+  return _jsxs("div", { style: { padding: 24, maxWidth: 1400, margin: "0 auto" }, children: [_jsxs("div", { style: { marginBottom: 32 }, children: [_jsx(Title, { level: 2, children: "\u{1F9EA} Form Instance Test Suite" }), _jsx(Paragraph, { children: _jsx(Text, { children: "Test suite cho breaking changes v\xE0 new features trong version m\u1EDBi. M\u1ED7i test case cover m\u1ED9t aspect c\u1EE5 th\u1EC3 c\u1EE7a Form Instance behavior." }) })] }), _jsxs("div", { style: { marginBottom: 24, padding: 16, background: "#e6f7ff", border: "1px solid #91d5ff" }, children: [_jsx(Title, { level: 4, children: "\u{1F4CB} Breaking Changes & New Features:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsxs("li", { children: [_jsx(Text, { strong: true, children: 'Form Prop "form":' }), " Form component c\xF3 th\u1EC3 nh\u1EADn ", _jsx(Text, { code: true, children: "form" }), " instance thay v\xEC ", _jsx(Text, { code: true, children: "formName" })] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "Auto-generate FormName:" }), " Form.useForm() t\u1EF1 \u0111\u1ED9ng t\u1EA1o UUID n\u1EBFu kh\xF4ng truy\u1EC1n tham s\u1ED1"] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "Safe Methods:" }), " Form methods c\xF3 th\u1EC3 g\u1ECDi an to\xE0n tr\u01B0\u1EDBc khi Form mount (proxy instance)"] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "useForm Tuple:" }), " useForm() tr\u1EA3 v\u1EC1 ", _jsx(Text, { code: true, children: "[instance, isReady]" }), " thay v\xEC ch\u1EC9 ", _jsx(Text, { code: true, children: "[instance]" })] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "useFormUtils Hook:" }), " Hook m\u1EDBi cho ph\xE9p thao t\xE1c form t\u1EEB b\xEAn ngo\xE0i component"] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "Headless Forms:" }), " Form instance ho\u1EA1t \u0111\u1ED9ng \u0111\u1ED9c l\u1EADp nh\u01B0 state manager"] })] })] }), _jsx(Tabs, { activeKey: activeTab, onChange: setActiveTab, items, size: "large", type: "card" }), _jsxs("div", { style: { marginTop: 32, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "\u{1F4A1} Testing Tips:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsx("li", { children: "M\u1EDF Browser Console \u0111\u1EC3 xem detailed logs v\xE0 warnings" }), _jsx("li", { children: "M\u1ED7i test case c\xF3 Expected Results section \u0111\u1EC3 verify behavior" }), _jsx("li", { children: "Test cases c\xF3 th\u1EC3 test \u0111\u1ED9c l\u1EADp, kh\xF4ng \u1EA3nh h\u01B0\u1EDFng l\u1EABn nhau" }), _jsx("li", { children: "Ch\xFA \xFD c\xE1c warning messages khi form methods \u0111\u01B0\u1EE3c g\u1ECDi sai timing" }), _jsx("li", { children: "Use Cases sections gi\u1EA3i th\xEDch khi n\xE0o n\xEAn d\xF9ng feature \u0111\xF3" })] })] })] });
+}
+export {
+  FormInstanceTestSuite as default
+};

package/dist/test/testSetValue/TestSetValueInEffect.d.ts

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

package/dist/test/testSetValue/TestSetValueInEffect.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input } from "antd";
+import axios from "axios";
+import { useEffect, useEffectEvent, useState } from "react";
+import { useShallow } from "zustand/react/shallow";
+import Form from "../../providers/Form";
+import { useFormStore } from "../../stores/formStore";
+function TestSetValueInEffect({}) {
+  const { getFormInstance } = useFormStore(useShallow((state) => ({
+    getFormInstance: state.getFormInstance
+  })));
+  const [stateRender, setStateRender] = useState(1);
+  const [form] = Form.useForm("testFormMounted");
+  const setDataEvent = useEffectEvent((form2) => {
+  });
+  useEffect(() => {
+    setTimeout(() => {
+    }, 1e3);
+    setDataEvent(form);
+    axios.get("https://jsonplaceholder.typicode.com/todos/1").then((response) => {
+    });
+  }, []);
+  return _jsxs("div", { children: [_jsx(Form, { formName: "testFormMounted", children: _jsx(Form.Item, { name: "test", initialValue: "initial value", children: _jsx(Input, {}) }) }), _jsxs(Button, { onClick: () => {
+    setStateRender((prev) => prev + 1);
+  }, children: ["Counter: ", stateRender] })] });
+}
+var stdin_default = TestSetValueInEffect;
+export {
+  stdin_default as default
+};

package/dist/types/public.d.ts

@@ -41,7 +41,7 @@ export interface PublicFormInstance<T = any> {
         name: string;
         value: any;
     }>;
-    getFieldErrors: () => Record<string, any>;
+    getFieldErrors: (names?: Array<keyof T & string>) => Record<string, any>;
     setFieldFocus: (name: keyof T & string) => void;
 }
 export interface UseFormItemProps<T = any> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.0.8",
+  "version": "1.1.0-beta.1",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",
@@ -42,6 +42,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.3.1",
     "antd": "^5.22.5",
+    "axios": "^1.13.6",
     "esbuild": "^0.24.0",
     "eslint": "^9.14.0",
     "eslint-plugin-react-hooks": "^5.1.0",

package/src/App.tsx

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

package/src/providers/Form.tsx

@@ -11,9 +11,15 @@ import {
   uniqBy,
 } from "lodash";
 import { useTask } from "minh-custom-hooks-release";
-import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
+import type {
+  ComponentType,
+  FormHTMLAttributes,
+  ReactElement,
+  ReactNode,
+} from "react";
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { flushSync } from "react-dom";
+import { v4 } from "uuid";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
 import FormItem from "../components/Form/FormItem";
 import { SUBMIT_STATE } from "../constants/form";
@@ -32,7 +38,7 @@ export type {
   FormFieldError,
   SubmitState,
   UseFormItemStateWatchReturn,
-  ValidationRule
+  ValidationRule,
 } from "../types/public";
 
 export const FormContext = createContext(null);
@@ -47,7 +53,7 @@ export interface FormProps<T = any> extends Omit<
 > {
   collectHiddenFields?: boolean;
   children: ReactNode;
-  formName: string;
+
   initialValues?: T;
   onFinish?: (values: T, allValues?: any) => void | Promise<void>;
   onReject?: (errorFields: any[]) => void | Promise<void>;
@@ -59,9 +65,23 @@ export interface FormProps<T = any> extends Omit<
   FormElement?: ComponentType<any>;
 }
 
-export default function Form<T = any>({
+export interface FormPropsWithInstance<T = any> {
+  form: PublicFormInstance<T>;
+}
+
+export interface FormPropsWithoutInstance {
+  formName: string;
+}
+
+interface FormDeclearation {
+  <T = any>(props: FormProps<T> & FormPropsWithInstance<T>): ReactElement;
+  <T = any>(props: FormProps<T> & FormPropsWithoutInstance): ReactElement;
+}
+
+const InternalForm: FormDeclearation = function Form<T = any>({
   children,
-  formName,
+  formName: externalFormName,
+  form: externalFormInstance,
   initialValues,
   onFinish,
   onReject,
@@ -69,7 +89,11 @@ export default function Form<T = any>({
   FormElement,
   collectHiddenFields: formCollectHiddenFields = true,
   ...props
-}: FormProps<T>) {
+}: FormProps<T> & (FormPropsWithInstance<T> & FormPropsWithoutInstance)) {
+  const formName = useMemo(() => {
+    return externalFormInstance?.formName ?? externalFormName;
+  }, [externalFormInstance, externalFormName]);
+
   const {
     // appInitValue,
     getFormItemValue,
@@ -742,18 +766,22 @@ export default function Form<T = any>({
       isInitied: true,
       submitState: "idle",
     });
-    setFormInstance({
-      formName,
-      resetFields,
-      submit: runSubmit,
-      submitAsync: runSubmitAsync,
-      setFieldValue,
-      setFieldValues,
-      getFieldValue,
-      getFieldValues,
-      setFieldFocus,
-      getFieldErrors,
-    });
+
+    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;
+    }
+
+    setFormInstance(formInstance);
 
     return () => {
       revokeFormInstance({ formName });
@@ -800,7 +828,7 @@ export default function Form<T = any>({
       )}
     </FormContext.Provider>
   );
-}
+};
 
 export function useFormContext() {
   const c = useContext(FormContext);
@@ -814,22 +842,133 @@ export function useForm<T = any>(
   formNameOrFormInstance?: string | PublicFormInstance<T>,
 ) {
   const formContext = useContext(FormContext);
-  const targetFormName = isNil(formNameOrFormInstance)
-    ? formContext?.formName
-    : typeof formNameOrFormInstance === "object" &&
-        formNameOrFormInstance !== null
-      ? (formNameOrFormInstance as PublicFormInstance<T>).formName
-      : (formNameOrFormInstance as string | undefined);
+  const [targetFormName] = useState(() => {
+    // Logic để xác định formName theo thứ tự ưu tiên:
+    // 1. Nếu formNameOrFormInstance là undefined hoặc null → Lấy formName từ context (nếu có)
+    // 2. Nếu formNameOrFormInstance là object (giả định là PublicFormInstance) → Lấy formName từ object đó
+    // 3. Nếu formNameOrFormInstance là string → Sử dụng trực tiếp string đó làm formName
+    return isNil(formNameOrFormInstance)
+      ? formContext?.formName
+      : typeof formNameOrFormInstance === "object" &&
+          formNameOrFormInstance !== null
+        ? (formNameOrFormInstance as PublicFormInstance<T>).formName
+        : (formNameOrFormInstance as string | undefined);
+  });
 
+  // Nếu không có formName nào được cung cấp từ cả 3 nguồn trên, tạo một formName ngẫu nhiên
+  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 === targetFormName);
+    return state.formInstances.find((i) => i.formName === initFormName);
   }) as PublicFormInstance<T> | undefined;
 
-  return [formInstance];
+  const getFormInstance = useFormStore((state) => {
+    return state.getFormInstance;
+  });
+
+  // Trả về formInstance nếu tìm thấy, nếu không trả về một object mới với formName là initFormName để tránh lỗi khi gọi các method trên formInstance
+  return [
+    formInstance ??
+      ({
+        formName: initFormName,
+        setFieldValue(name, value, options) {
+          const formInstanceFind = getFormInstance(initFormName);
+          if (formInstanceFind) {
+            formInstanceFind.setFieldValue(name, value, options);
+            return;
+          }
+          console.warn(
+            `Form instance not init for formName: ${initFormName}. setFieldValue is not available.`,
+          );
+        },
+        setFieldValues(values, options) {
+          const formInstanceFind = getFormInstance(initFormName);
+          if (formInstanceFind) {
+            formInstanceFind.setFieldValues(values, options);
+            return;
+          }
+          console.warn(
+            `Form instance not init for formName: ${initFormName}. setFieldValues is not available.`,
+          );
+        },
+        getFieldValue(name) {
+          const formInstanceFind = getFormInstance(initFormName);
+          if (formInstanceFind) {
+            return formInstanceFind.getFieldValue(name);
+          }
+          console.warn(
+            `Form instance not init for formName: ${initFormName}. getFieldValue is not available.`,
+          );
+          return undefined;
+        },
+        getFieldValues(names) {
+          const formInstanceFind = getFormInstance(initFormName);
+          if (formInstanceFind) {
+            return formInstanceFind.getFieldValues(names);
+          }
+          console.warn(
+            `Form instance not init for formName: ${initFormName}. getFieldValues is not available.`,
+          );
+          return names.map((name) => ({ name, value: undefined }));
+        },
+        setFieldFocus(name) {
+          const formInstanceFind = getFormInstance(initFormName);
+          if (formInstanceFind) {
+            formInstanceFind.setFieldFocus(name);
+            return;
+          }
+          console.warn(
+            `Form instance not init for formName: ${initFormName}. setFieldFocus is not available.`,
+          );
+        },
+        getFieldErrors(names) {
+          const formInstanceFind = getFormInstance(initFormName);
+          if (formInstanceFind) {
+            return formInstanceFind.getFieldErrors(names);
+          }
+          console.warn(
+            `Form instance not init for formName: ${initFormName}. getFieldErrors is not available.`,
+          );
+          return names.map((name) => ({ name, errors: [] }));
+        },
+        submit() {
+          const formInstanceFind = getFormInstance(initFormName);
+          if (formInstanceFind) {
+            formInstanceFind.submit();
+            return;
+          }
+          console.warn(
+            `Form instance not init for formName: ${initFormName}. submit is not available.`,
+          );
+        },
+        submitAsync() {
+          const formInstanceFind = getFormInstance(initFormName);
+          if (formInstanceFind) {
+            return formInstanceFind.submitAsync();
+          }
+          console.warn(
+            `Form instance not init for formName: ${initFormName}. submitAsync is not available.`,
+          );
+          return Promise.resolve();
+        },
+        resetFields(resetOptions) {
+          const formInstanceFind = getFormInstance(initFormName);
+          if (formInstanceFind) {
+            formInstanceFind.resetFields(resetOptions);
+            return;
+          }
+          console.warn(
+            `Form instance not init for formName: ${initFormName}. resetFields is not available.`,
+          );
+        },
+      } as PublicFormInstance<T>),
+    Boolean(formInstance),
+  ] as const;
 }
 
 export function useWatch<T = any>(
-  name: keyof T & string,
+  name: keyof T | (string & {}),
   formNameOrFormInstance?: string | PublicFormInstance<T>,
 ) {
   const [formInstance] = useForm<T>(formNameOrFormInstance as any);
@@ -933,6 +1072,83 @@ export const useFormItemStateWatch = <T = any,>(
   };
 };
 
+export const useFormUtils = () => {
+  const { getFormInstance } = useFormStore(
+    useShallow((state) => ({
+      getFormInstance: state.getFormInstance,
+    })),
+  );
+
+  const handleGetFormInstace = (
+    formNameOrFormInstance?: string | PublicFormInstance,
+  ) => {
+    const targetFormName = isNil(formNameOrFormInstance)
+      ? undefined
+      : typeof formNameOrFormInstance === "object" &&
+          formNameOrFormInstance !== null
+        ? (formNameOrFormInstance as PublicFormInstance).formName
+        : (formNameOrFormInstance as string | undefined);
+
+    if (!targetFormName) {
+      throw new Error("Form name is required to get form instance");
+    }
+
+    const formInstance = getFormInstance(targetFormName);
+
+    return formInstance;
+  };
+
+  const setFieldValue = (
+    formNameOrFormInstance: string | PublicFormInstance,
+    name: string,
+    value: any,
+    options?: SetFieldValueOptions,
+  ) => {
+    const formInstance = handleGetFormInstace(formNameOrFormInstance);
+    if (!formInstance) {
+      console.warn(
+        `Form instance not found for formName: ${formNameOrFormInstance}`,
+      );
+      return;
+    }
+    formInstance.setFieldValue(name, value, options);
+  };
+
+  const setFieldValues = (
+    formNameOrFormInstance: string | PublicFormInstance,
+    values: any,
+    options?: SetFieldValueOptions,
+  ) => {
+    const formInstance = handleGetFormInstace(formNameOrFormInstance);
+    if (!formInstance) {
+      console.warn(
+        `Form instance not found for formName: ${formNameOrFormInstance}`,
+      );
+      return;
+    }
+    formInstance.setFieldValues(values, options);
+  };
+
+  return {
+    getFormInstance: handleGetFormInstace,
+    setFieldValue,
+    setFieldValues,
+  };
+};
+
+interface FormExposeType extends FormDeclearation {
+  useForm: typeof useForm;
+  Item: typeof FormItem;
+  useWatch: typeof useWatch;
+  useWatchNormalized: typeof useWatchNormalized;
+  useSubmitDataWatch: typeof useSubmitDataWatch;
+  useFormStateWatch: typeof useFormStateWatch;
+  useFormItemStateWatch: typeof useFormItemStateWatch;
+  useFormUtils: typeof useFormUtils;
+}
+
+const Form = InternalForm as FormExposeType;
+
 Form.useForm = useForm;
 Form.Item = FormItem;
 Form.useWatch = useWatch;
@@ -940,3 +1156,6 @@ Form.useWatchNormalized = useWatchNormalized;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
 Form.useFormItemStateWatch = useFormItemStateWatch;
+Form.useFormUtils = useFormUtils;
+
+export default Form;

package/src/stores/formStore.ts

@@ -279,7 +279,9 @@ const createFormStoreSlice = (storeSet: any, storeGet: any, api: any) => ({
       }),
     );
   },
-
+  getFormInstance(formName) {
+    return storeGet().formInstances.find((f) => f.formName === formName);
+  },
   setFormInstance({
     formName,
     resetFields,