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

package/CHANGELOG.md

@@ -1,6 +1,25 @@
 # Changelog
 
 All notable changes to this project will be documented in this file.
+
+## [1.0.8-beta.3] - 2026-01-22
+
+## [1.0.8-beta.7] - 2026-01-24
+- Add control flag for FormItem to support rendering MUI uncontrolled components when initial value is undefined (control on init).
+- Fix: `onReset` did not restore listener state to init.
+- Fix: reset did not return Form submit state to `idle`.
+- Add `hidden` prop to allow hiding components while still assigning a value.
+
+Docs: Update usage notes for `FormItem` control-on-init flag and `hidden` prop.
+- Add `UseFormItemStateWatchReturn` type export for `useFormItemStateWatch` hook
+
+- Add isTouched field to FormItem for tracking user interaction state
+
+## [1.0.8-beta.10] - 2026-01-27
+- `useForm()` giờ có thể trả về form instance từ provider lân cận nếu không truyền `formName` (không còn bắt buộc truyền tên form khi đã wrap trong `Form`).
+- `FormList.add` khi không truyền `index` sẽ mặc định append vào cuối danh sách.
+- Docs: cập nhật hướng dẫn cho `useForm` và `FormList.add`.
+
 ## [1.0.8-beta.1] - 2026-01-22
 
 - Fix UseFormItemControlReturn errors type to properly export FormFieldError[]

package/README.md

@@ -2,8 +2,6 @@
 
 Thư viện form nhẹ dành cho React — hỗ trợ form, field, list (array fields), và cơ chế listener để giảm re-render.
 
-Phiên bản này xuất phát từ mã nguồn JS. Typings (.d.ts) được cung cấp trong `src/types/components.d.ts`.
-
 ---
 
 ## Cài đặt
@@ -80,6 +78,8 @@ export default Example;
 
 Bạn có thể lấy instance form để gọi phương thức chương trình như `submit`, `resetFields`, `setFieldValue`…
 
+`useForm` ưu tiên lấy instance từ provider gần nhất nếu không truyền `formName`, giúp bạn không cần truyền tên form khi đã bọc trong `Form`.
+
 Ví dụ sử dụng hook attached trên `Form`:
 
 ```jsx
@@ -87,7 +87,7 @@ import React from "react";
 import Form from "react-form-manage";
 
 function CtrlExample() {
-  const [form] = Form.useForm("myForm"); // hoặc useForm('myForm')
+  const [form] = Form.useForm(); // hoặc Form.useForm('myForm') khi muốn chỉ định form khác
 
   return (
     <div>
@@ -156,6 +156,9 @@ Custom validator (async):
 
 `FormList` là render-prop component cung cấp `listFields` và các action `add`, `remove`, `move`.
 
+Ghi chú:
+- `add()` nếu không truyền `index` sẽ tự động append phần tử mới vào cuối danh sách.
+
 Ví dụ:
 
 ```jsx
@@ -192,7 +195,7 @@ Lưu ý: `FormList` quản lý các `key` nội bộ và push các mục cần c
 
 ## Hooks (tóm tắt)
 
-- `useForm(formNameOrFormInstance)` — trả về form instance đã đăng ký.
+- `useForm(formNameOrFormInstance?)` — nếu không truyền thì lấy instance từ `Form` provider gần nhất; nếu truyền `formName` thì chọn form tương ứng.
 - `useWatch(name, formNameOrFormInstance)` — subscribe giá trị field.
 - `useSubmitDataWatch` — watch dữ liệu submit cuối cùng.
 - `useFormStateWatch` — watch state của form (isInitied, submitState…).

package/dist/components/Form/FormItem.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import type { ValidationRule } from "../../types/public";
 export interface FormItemProps {
-    children: ReactElement;
+    children: ReactElement<any>;
     name: string;
     formName?: string;
     initialValue?: any;
@@ -9,5 +9,7 @@ export interface FormItemProps {
     rules?: ValidationRule[];
     valuePropName?: string;
     getValueFromEvent?: (...args: any[]) => any;
+    controlAfterInit?: boolean;
+    hidden?: boolean;
 }
-export default function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName, getValueFromEvent, }: FormItemProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export default function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName, getValueFromEvent, controlAfterInit, hidden, }: FormItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/FormItem.js

@@ -1,10 +1,11 @@
-import { cloneElement, useRef, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, Fragment, useRef, useState } from "react";
 import { v4 } from "uuid";
 import useFormItemControl from "../../hooks/useFormItemControl";
-function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName = "value", getValueFromEvent }) {
+function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName = "value", getValueFromEvent, controlAfterInit = false, hidden }) {
   const elRef = useRef(null);
   const [formItemId] = useState(externalFormItemId != null ? externalFormItemId : v4());
-  const { value, onChange, errors, state, onFocus, isDirty, submitState } = useFormItemControl({
+  const { value, onChange, errors, state, onFocus, isDirty, submitState, isTouched, isInitied } = useFormItemControl({
     formName,
     name,
     initialValue,
@@ -12,7 +13,8 @@ function FormItem({ children, name, formName, initialValue, formItemId: external
     rules,
     elementRef: elRef
   });
-  return cloneElement(children, {
+  return _jsx(Fragment, { children: !hidden && children ? cloneElement(children, {
+    name,
     // ref: inputRef,
     [valuePropName]: value,
     onChange: (...args) => {
@@ -38,8 +40,9 @@ function FormItem({ children, name, formName, initialValue, formItemId: external
     onFocus,
     validateState: state,
     ref: elRef,
-    submitState
-  });
+    submitState,
+    isTouched
+  }) : null }, `control-after-init-${Boolean(controlAfterInit && isInitied) ? "1" : "0"}-${formItemId}`);
 }
 export {
   FormItem as default

package/dist/components/Form/FormList.d.ts

@@ -20,5 +20,5 @@ export interface FormListProps<T = any> {
         }) => void;
     }) => React.ReactNode;
 }
-declare const FormList: <T = any>({ name, initialValues, form, formName, children }: FormListProps<T>) => import("react").ReactNode;
+declare const FormList: <T = any>({ name, initialValues, form, formName, children, }: FormListProps<T>) => import("react").ReactNode;
 export default FormList;

package/dist/components/Form/FormList.js

@@ -1,6 +1,6 @@
-import useTestRrenderListControl from "../../hooks/useFormListControl";
+import useFormListControl from "../../hooks/useFormListControl";
 const FormList = ({ name, initialValues, form, formName, children }) => {
-  const { listFields, ...actions } = useTestRrenderListControl({
+  const { listFields, ...actions } = useFormListControl({
     name,
     initialValues,
     form,

package/dist/hooks/useFormItemControl.d.ts

@@ -18,7 +18,9 @@ export interface UseFormItemControlReturn {
     errors: FormFieldError[];
     onFocus: () => void;
     isDirty?: boolean;
+    isTouched?: boolean;
     submitState?: SubmitState;
+    isInitied?: boolean;
 }
 export default function useFormItemControl<T = any>({ formName, form, name, initialValue, formItemId, rules, elementRef, }: UseFormItemControlProps): UseFormItemControlReturn;
 export {};

package/dist/hooks/useFormItemControl.js

@@ -38,7 +38,7 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
   }));
   const onInitData = (value2) => {
     setInitData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name, value2);
-    onChange(value2, { notTriggerDirty: true });
+    onChange(value2, { notTriggerDirty: true, initiedData: true });
   };
   const onFocus = () => {
     setListener({
@@ -60,10 +60,21 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
         isTouched: listener == null ? void 0 : listener.isTouched
       });
     }
+    if ((options == null ? void 0 : options.initiedData) === true) {
+      setListener({
+        formItemId,
+        isInitied: true
+      });
+    }
     setData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name, value2);
   };
   const onReset = (value2) => {
-    onChange(isNil(value2) ? getInitData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name) : value2);
+    setListener({
+      formItemId,
+      isDirty: false,
+      isTouched: false
+    });
+    onChange(isNil(value2) ? getInitData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name) : value2, { notTriggerDirty: true, initiedData: true });
   };
   const internalRules = useMemo(() => {
     return rules || [];
@@ -262,7 +273,10 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
             onInitData(initialValue);
           }
         } else {
-          onChange(internalInitValue, { notTriggerDirty: true });
+          onChange(internalInitValue, {
+            notTriggerDirty: true,
+            initiedData: true
+          });
         }
       }
       return;
@@ -319,7 +333,9 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
     errors,
     onFocus,
     isDirty: listener == null ? void 0 : listener.isDirty,
-    submitState
+    isTouched: listener == null ? void 0 : listener.isTouched,
+    submitState,
+    isInitied: listener == null ? void 0 : listener.isInitied
   };
 }
 export {

package/dist/hooks/useFormListControl.d.ts

@@ -16,7 +16,7 @@ interface UseFormListControlReturn {
         fromKey?: string;
         to: number;
     }) => void;
-    add: (index: number) => void;
+    add: (index?: number) => void;
     remove: (opts: {
         index?: number;
         key?: string;

package/dist/hooks/useFormListControl.js

@@ -55,11 +55,7 @@ function useFormListControl({ name, form, initialValues, formName }) {
   };
   const add = (index) => {
     setListFields((prev) => {
-      if (index > prev.length)
-        return prev;
-      if (index < 0)
-        return prev;
-      if (index === prev.length) {
+      if (isNil(index) || index === prev.length) {
         const newName = `${name}.${prev.length}`;
         const newKey = v4();
         const result2 = [
@@ -71,6 +67,10 @@ function useFormListControl({ name, form, initialValues, formName }) {
         ];
         return result2;
       }
+      if (index > prev.length)
+        return prev;
+      if (index < 0)
+        return prev;
       const clonePrev = [...prev];
       const result = clonePrev.reduce((prev2, cur, curIndex) => {
         const newKey = v4();

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type ValidationRule, type FormFieldError, type SubmitState } from "./providers/Form";
+import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type ValidationRule, type FormFieldError, type SubmitState, type UseFormItemStateWatchReturn } from "./providers/Form";
 import { SUBMIT_STATE } from "./constants/form";
 import FormItem, { type FormItemProps } from "./components/Form/FormItem";
 import FormList, { type FormListProps } from "./components/Form/FormList";
@@ -6,5 +6,5 @@ import Input from "./components/Input";
 import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWrapper";
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
-export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type FormItemProps, type FormListProps, type InputWrapperProps, type ValidationRule, type FormFieldError, type SubmitState, SUBMIT_STATE, };
+export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type FormItemProps, type FormListProps, type InputWrapperProps, type ValidationRule, type FormFieldError, type SubmitState, type UseFormItemStateWatchReturn, SUBMIT_STATE, };
 export default Form;

package/dist/providers/Form.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
-import type { PublicFormInstance } from "../types/public";
-export type { ValidationRule, FormFieldError, SubmitState } from "../types/public";
+import type { PublicFormInstance, UseFormItemStateWatchReturn } from "../types/public";
+export type { FormFieldError, SubmitState, UseFormItemStateWatchReturn, ValidationRule, } from "../types/public";
 export declare const FormContext: import("react").Context<any>;
 export interface FormProps<T = any> extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
     children: ReactNode;
@@ -21,6 +21,7 @@ declare namespace Form {
     var useWatch: typeof import("./Form").useWatch;
     var useSubmitDataWatch: typeof import("./Form").useSubmitDataWatch;
     var useFormStateWatch: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => any;
+    var useFormItemStateWatch: <T = any>(nameOrFormItemId: string, formNameOrFormInstance?: string | PublicFormInstance<T>) => UseFormItemStateWatchReturn;
 }
 export default Form;
 export declare function useFormContext(): any;
@@ -32,3 +33,4 @@ export declare function useSubmitDataWatch<T = any>({ formNameOrFormInstance, tr
     mapFn?: (v: any, prev: any) => any;
 }): T | undefined;
 export declare const useFormStateWatch: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => any;
+export declare const useFormItemStateWatch: <T = any>(nameOrFormItemId: string, formNameOrFormInstance?: string | PublicFormInstance<T>) => UseFormItemStateWatchReturn;

package/dist/providers/Form.js

@@ -1,33 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneDeep, get, isEqual, last, set, uniq } from "lodash";
+import { cloneDeep, get, isEqual, isNil, last, set, uniqBy } from "lodash";
 import { useTask } from "minh-custom-hooks-release";
 import { createContext, useContext, useEffect, useState } from "react";
 import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow";
 import FormCleanUp from "../components/Form/FormCleanUp";
+import { SUBMIT_STATE } from "../constants/form";
 import { useFormListeners, useFormStore } from "../stores/formStore";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
 const FormContext = createContext(null);
 function Form({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, ...props }) {
-  const { appInitValue, getFormItemValue, setInitData, setData, getFormValues, setFormState, setFormInstance, revokeFormInstance, setSubmitHistory, clearFormValues, clearFormInitialValues, clearFormState } = useFormStore(useShallow((state) => {
-    var _a;
-    return {
-      appInitValue: state.initialValues,
-      setInitData: state.setInitData,
-      getFormValues: state.getFormValues,
-      setFormState: state.setFormState,
-      setFormInstance: state.setFormInstance,
-      revokeFormInstance: state.revokeFormInstance,
-      setData: state.setData,
-      setSubmitHistory: state.setSubmitHistory,
-      getFormItemValue: state.getFormItemValue,
-      clearFormValues: state.clearFormValues,
-      clearFormInitialValues: state.clearFormInitialValues,
-      clearFormState: state.clearFormState,
-      // Test, nhớ xóa sau khi xong
-      formStates: (_a = state.formStates) == null ? void 0 : _a[formName]
-    };
-  }));
+  const {
+    // appInitValue,
+    getFormItemValue,
+    setInitData,
+    setData,
+    getFormValues,
+    setFormState,
+    setFormInstance,
+    revokeFormInstance,
+    setSubmitHistory,
+    clearFormValues,
+    clearFormInitialValues,
+    clearFormState
+  } = useFormStore(useShallow((state) => ({
+    // appInitValue: state.initialValues,
+    setInitData: state.setInitData,
+    getFormValues: state.getFormValues,
+    setFormState: state.setFormState,
+    setFormInstance: state.setFormInstance,
+    revokeFormInstance: state.revokeFormInstance,
+    setData: state.setData,
+    setSubmitHistory: state.setSubmitHistory,
+    getFormItemValue: state.getFormItemValue,
+    clearFormValues: state.clearFormValues,
+    clearFormInitialValues: state.clearFormInitialValues,
+    clearFormState: state.clearFormState
+    // Test, nhớ xóa sau khi xong
+    // formStates: state.formStates?.[formName],
+  })));
   const { getListeners } = useFormListeners(useShallow((state) => {
     return {
       getListeners: state.getListeners
@@ -95,7 +106,7 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
         const formValues = getFormValues(formName);
         const resultValues = cloneDeep(formValues);
         const cleanValues = {};
-        uniq(listeners, (l) => l.name).forEach((l) => {
+        uniqBy(listeners, (l) => l.name).forEach((l) => {
           set(cleanValues, l.name, get(resultValues, l.name));
         });
         const handleIsolateCase = async () => {
@@ -167,7 +178,8 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
     reset();
     flushSync(setFormState({
       formName,
-      isInitied: false
+      isInitied: false,
+      submitState: SUBMIT_STATE.IDLE
     }));
     const totalListenerFields = getListeners();
     if (Array.isArray(resetOptions)) {
@@ -252,7 +264,8 @@ function useFormContext() {
   return c;
 }
 function useForm(formNameOrFormInstance) {
-  const targetFormName = typeof formNameOrFormInstance === "object" && formNameOrFormInstance !== null ? formNameOrFormInstance.formName : formNameOrFormInstance;
+  const formContext = useContext(FormContext);
+  const targetFormName = isNil(formNameOrFormInstance) ? formContext == null ? void 0 : formContext.formName : typeof formNameOrFormInstance === "object" && formNameOrFormInstance !== null ? formNameOrFormInstance.formName : formNameOrFormInstance;
   const formInstance = useFormStore((state) => {
     return state.formInstances.find((i) => i.formName === targetFormName);
   });
@@ -287,15 +300,28 @@ const useFormStateWatch = (formNameOrFormInstance) => {
   });
   return formState;
 };
+const useFormItemStateWatch = (nameOrFormItemId, formNameOrFormInstance) => {
+  const [formInstance] = useForm(formNameOrFormInstance);
+  const listener = useFormStore((state) => {
+    return state.getListeners().find((l) => l.formName === (formInstance == null ? void 0 : formInstance.formName) && (l.name === nameOrFormItemId || l.formItemId === nameOrFormItemId));
+  });
+  return {
+    isTouched: listener == null ? void 0 : listener.isTouched,
+    isDirty: listener == null ? void 0 : listener.isDirty,
+    errors: (listener == null ? void 0 : listener.internalErrors) || []
+  };
+};
 Form.useForm = useForm;
 Form.useWatch = useWatch;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
+Form.useFormItemStateWatch = useFormItemStateWatch;
 export {
   FormContext,
   Form as default,
   useForm,
   useFormContext,
+  useFormItemStateWatch,
   useFormStateWatch,
   useSubmitDataWatch,
   useWatch

package/dist/stores/formStore.js

@@ -200,7 +200,7 @@ const useFormListeners = create((storeSet, storeGet) => ({
   getListeners() {
     return storeGet().listeners;
   },
-  setListener({ formName, name, onChange, onReset, isTouched, isDirty, formItemId, internalErrors, onFocus, emitFocus }) {
+  setListener({ formName, name, onChange, onReset, isTouched, isDirty, formItemId, internalErrors, onFocus, emitFocus, isInitied }) {
     return storeSet(produce((state) => {
       const storeListeners = state.listeners;
       const findListenerIndex = state.listeners.findIndex((l) => l.formItemId === formItemId);
@@ -232,17 +232,21 @@ const useFormListeners = create((storeSet, storeGet) => ({
         if (!isNil(emitFocus)) {
           storeListeners[findListenerIndex].emitFocus = emitFocus;
         }
+        if (!isNil(isInitied)) {
+          storeListeners[findListenerIndex].isInitied = isInitied;
+        }
         return;
       }
       storeListeners.push({
         name,
         formName,
-        isTouched,
-        isDirty,
+        isTouched: Boolean(isTouched),
+        isDirty: Boolean(isDirty),
         formItemId,
         internalErrors,
         onChange,
-        onReset
+        onReset,
+        isInitied: Boolean(isInitied)
       });
     }));
   },

package/dist/types/public.d.ts

@@ -61,6 +61,11 @@ export interface UseFormItemReturn<T = any> {
     isDirty?: boolean;
     submitState?: SubmitState;
 }
+export interface UseFormItemStateWatchReturn {
+    isTouched?: boolean;
+    isDirty?: boolean;
+    errors: FormFieldError[];
+}
 export interface UseFormListProps<T = any> {
     name?: string;
     form?: PublicFormInstance<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.0.8-beta.1",
+  "version": "1.0.8-beta.11",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",
@@ -36,6 +36,7 @@
     "@emotion/styled": "^11.14.1",
     "@eslint/js": "^9.14.0",
     "@mui/material": "^7.3.7",
+    "@types/lodash": "^4.17.23",
     "@types/node": "^22.9.3",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
@@ -45,6 +46,7 @@
     "eslint": "^9.14.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "framer-motion": "^12.29.0",
     "globals": "^15.12.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/src/App.tsx

@@ -1,13 +1,25 @@
+import { Checkbox } from "@mui/material";
 import { Button, Input } from "antd";
+import { motion } from "framer-motion";
 import { useEffect } from "react";
 import FormItem from "./components/Form/FormItem";
 import FormList from "./components/Form/FormList";
 import InputWrapper from "./components/Form/InputWrapper";
 import Form, { useForm } from "./providers/Form";
 
+import { Form as AntdForm } from "antd";
+
+function TestFormWatch() {
+  const watchValue = Form.useWatch("numericCode");
+
+  return <div>TestFormWatch</div>;
+}
+
 const App = () => {
   const [form] = useForm("form1");
 
+  const watchCheckBox = Form.useWatch("checkControlledAfterInit", "form1");
+
   useEffect(() => {
     if (form) {
       // setTimeout(() => {
@@ -17,6 +29,20 @@ const App = () => {
   }, [form]);
   return (
     <div>
+      <AntdForm>
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 1 }}
+        >
+          <AntdForm.Item name={"234"} initialValue={"23432"} label="Antd Input">
+            <Input />
+          </AntdForm.Item>
+        </motion.div>
+      </AntdForm>
+
+      {/* Hidden Test */}
       <Form
         initialValues={{
           TestData: "",
@@ -27,13 +53,25 @@ const App = () => {
           console.log(values);
         }}
         formName={"form1"}
+        // hidden
       >
-        <FormItem name={"TestData"}>
+        <FormItem
+          name={"username"}
+          rules={[
+            {
+              required: true,
+              message: "Test",
+            },
+          ]}
+          initialValue={"283746"}
+          // hidden
+        >
           <InputWrapper>
             <Input />
           </InputWrapper>
         </FormItem>
 
+        {/* Numberic test */}
         <FormItem
           name={"numericCode"}
           rules={[
@@ -48,6 +86,20 @@ const App = () => {
             <Input placeholder="Mã chỉ gồm số" style={{ width: 200 }} />
           </InputWrapper>
         </FormItem>
+
+        {/* Motion Test */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 1 }}
+        >
+          <FormItem name="motionTest" controlAfterInit initialValue={"1234134"}>
+            <InputWrapper>
+              <Input placeholder="Motion Test" style={{ width: 200 }} />
+            </InputWrapper>
+          </FormItem>
+        </motion.div>
         <FormList
           initialValues={[
             {
@@ -93,12 +145,40 @@ const App = () => {
             </div>
           )}
         </FormList>
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 1.5 }}
+        >
+          <FormItem
+            valuePropName="checked"
+            getValueFromEvent={(_, checked) => checked}
+            name="checkControlledAfterInit"
+            controlAfterInit={true}
+            initialValue={true}
+          >
+            <Checkbox />
+          </FormItem>
+        </motion.div>
+        <TestFormWatch />
+        <Button
+          onClick={() => {
+            const current = form?.getFieldValue("checkControlledAfterInit");
+            console.log("Toggle controlled after init: ", current);
+            form?.setFieldValue("checkControlledAfterInit", !current);
+          }}
+        >
+          Toggle
+        </Button>
         <Button htmlType="submit">Submit</Button>
         <Button
           onClick={() => {
             form?.resetFields?.();
           }}
-        ></Button>
+        >
+          Reset
+        </Button>
       </Form>
     </div>
   );

package/src/components/Form/FormItem.tsx

@@ -1,11 +1,11 @@
 import type { ReactElement } from "react";
-import { cloneElement, 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";
 
 export interface FormItemProps {
-  children: ReactElement;
+  children: ReactElement<any>;
   name: string;
   formName?: string;
   initialValue?: any;
@@ -13,6 +13,8 @@ export interface FormItemProps {
   rules?: ValidationRule[];
   valuePropName?: string;
   getValueFromEvent?: (...args: any[]) => any;
+  controlAfterInit?: boolean;
+  hidden?: boolean;
 }
 
 export default function FormItem({
@@ -24,52 +26,85 @@ export default function FormItem({
   rules,
   valuePropName = "value",
   getValueFromEvent,
+  controlAfterInit = false,
+  hidden,
 }: FormItemProps) {
   const elRef = useRef<any>(null);
 
   const [formItemId] = useState(externalFormItemId ?? v4());
-  const { value, onChange, errors, state, onFocus, isDirty, submitState } =
-    useFormItemControl({
-      formName,
-      name,
-      initialValue,
-      formItemId,
-      rules,
-      elementRef: elRef,
-    });
+  const {
+    value,
+    onChange,
+    errors,
+    state,
+    onFocus,
+    isDirty,
+    submitState,
+    isTouched,
+    isInitied,
+  } = useFormItemControl({
+    formName,
+    name,
+    initialValue,
+    formItemId,
+    rules,
+    elementRef: elRef,
+  });
   // console.log("re-render", formName, name);
 
   // useEffect(() => {
   //   console.log({ value });
   // }, [value]);
 
-  return cloneElement(children, {
-    // ref: inputRef,
-    [valuePropName]: value,
-    onChange: (...args: any[]) => {
-      let val = args[0];
-      if (getValueFromEvent && typeof getValueFromEvent === "function") {
-        val = getValueFromEvent(...args);
-      } else {
-        const e = args[0];
-        if (e && e.target) {
-          val = e.target.value;
-        }
-      }
-      onChange(val);
-    },
-    // onFocus: () => {
-    //   setIsTouched(true);
-    // },
-    // isTouched: isTouched,
-    isDirty: isDirty,
-    // errors: errors,
-    // formState,
+  // useEffect(() => {
+  //   console.log("isInitied changed: ", {
+  //     isInitied,
+  //     name,
+  //     value,
+  //     controlAfterInit,
+  //   });
+  // }, [isInitied]);
+
+  return (
+    <Fragment
+      key={`control-after-init-${Boolean(controlAfterInit && isInitied) ? "1" : "0"}-${formItemId}`}
+    >
+      {!hidden && children
+        ? cloneElement(children, {
+            name,
+            // ref: inputRef,
+            [valuePropName]: value,
+            onChange: (...args: any[]) => {
+              let val = args[0];
+              if (
+                getValueFromEvent &&
+                typeof getValueFromEvent === "function"
+              ) {
+                val = getValueFromEvent(...args);
+              } else {
+                const e = args[0];
+                if (e && e.target) {
+                  val = e.target.value;
+                }
+              }
+              onChange(val);
+            },
+            // onFocus: () => {
+            //   setIsTouched(true);
+            // },
+            // isTouched: isTouched,
+            isDirty: isDirty,
+            // errors: errors,
+            // formState,
 
-    errors,
-    onFocus,
-    validateState: state,
-    ref: elRef,
-    submitState,
-  } as any);
+            errors,
+            onFocus,
+            validateState: state,
+            ref: elRef,
+            submitState,
+            isTouched: isTouched,
+          } as any)
+        : null}
+    </Fragment>
+  );
 }

package/src/components/Form/FormList.tsx

@@ -1,4 +1,4 @@
-import useTestRrenderListControl from "../../hooks/useFormListControl";
+import useFormListControl from "../../hooks/useFormListControl";
 import type { FormInstance } from "../../stores/formStore";
 
 export interface FormListProps<T = any> {
@@ -6,11 +6,24 @@ export interface FormListProps<T = any> {
   initialValues?: T[];
   form?: FormInstance;
   formName?: string;
-  children: (fields: Array<{ name: string; key: string }>, operations: { add: (index: number) => void; remove: (opts: { index?: number; key?: string }) => void; move: (opts: { from?: number; fromKey?: string; to: number }) => void }) => React.ReactNode;
+  children: (
+    fields: Array<{ name: string; key: string }>,
+    operations: {
+      add: (index: number) => void;
+      remove: (opts: { index?: number; key?: string }) => void;
+      move: (opts: { from?: number; fromKey?: string; to: number }) => void;
+    },
+  ) => React.ReactNode;
 }
 
-const FormList = <T = any>({ name, initialValues, form, formName, children }: FormListProps<T>) => {
-  const { listFields, ...actions } = useTestRrenderListControl({
+const FormList = <T = any,>({
+  name,
+  initialValues,
+  form,
+  formName,
+  children,
+}: FormListProps<T>) => {
+  const { listFields, ...actions } = useFormListControl({
     name,
     initialValues,
     form,

package/src/components/Form/InputWrapper.tsx

@@ -13,6 +13,11 @@ const InputWrapper = ({
   errors = [],
   ...props
 }: InputWrapperProps) => {
+  // useEffect(() => {
+  //   console.log("InputWrapper submitState changed: ", {
+  //     submitState: props.submitState,
+  //   });
+  // }, [props.submitState]);
   return (
     <div>
       {cloneElement(children, props)}

package/src/hooks/useFormItemControl.ts

@@ -50,7 +50,9 @@ export interface UseFormItemControlReturn {
   errors: FormFieldError[];
   onFocus: () => void;
   isDirty?: boolean;
+  isTouched?: boolean;
   submitState?: SubmitState;
+  isInitied?: boolean;
 }
 
 const VALID_PREMITIVE_TYPE = ["string", "number", "undefined"];
@@ -153,7 +155,7 @@ export default function useFormItemControl<T = any>({
       name,
       value,
     );
-    onChange(value, { notTriggerDirty: true });
+    onChange(value, { notTriggerDirty: true, initiedData: true });
   };
 
   const onFocus = () => {
@@ -170,7 +172,13 @@ export default function useFormItemControl<T = any>({
     }
   };
 
-  const onChange = (value: T, options?: any) => {
+  const onChange = (
+    value: T,
+    options?: {
+      notTriggerDirty?: boolean;
+      initiedData?: boolean;
+    },
+  ) => {
     if (options?.notTriggerDirty !== true) {
       setListener({
         formItemId,
@@ -178,6 +186,12 @@ export default function useFormItemControl<T = any>({
         isTouched: listener?.isTouched,
       });
     }
+    if (options?.initiedData === true) {
+      setListener({
+        formItemId,
+        isInitied: true,
+      });
+    }
     setData(formName || form?.formName || contextForm?.formName, name, value);
   };
 
@@ -187,10 +201,16 @@ export default function useFormItemControl<T = any>({
       value,
       getInitData(formName || form?.formName || contextForm?.formName, name),
     );
+    setListener({
+      formItemId,
+      isDirty: false,
+      isTouched: false,
+    });
     onChange(
       isNil(value)
         ? getInitData(formName || form?.formName || contextForm?.formName, name)
         : value,
+      { notTriggerDirty: true, initiedData: true },
     );
   };
 
@@ -521,7 +541,10 @@ export default function useFormItemControl<T = any>({
             onInitData(initialValue);
           }
         } else {
-          onChange(internalInitValue, { notTriggerDirty: true });
+          onChange(internalInitValue, {
+            notTriggerDirty: true,
+            initiedData: true,
+          });
         }
       }
       return;
@@ -596,6 +619,8 @@ export default function useFormItemControl<T = any>({
     errors,
     onFocus,
     isDirty: listener?.isDirty,
+    isTouched: listener?.isTouched,
     submitState,
+    isInitied: listener?.isInitied,
   };
 }

package/src/hooks/useFormListControl.ts

@@ -19,7 +19,7 @@ interface UseFormListControlProps {
 interface UseFormListControlReturn {
   listFields: ListField[];
   move: (opts: { from?: number; fromKey?: string; to: number }) => void;
-  add: (index: number) => void;
+  add: (index?: number) => void;
   remove: (opts: { index?: number; key?: string }) => void;
 }
 
@@ -31,7 +31,9 @@ export default function useFormListControl<T = any>({
 }: UseFormListControlProps): UseFormListControlReturn {
   const contextForm = useFormContext();
   const getFormValues = useFormStore((state) => state.getFormValues);
-  const [listFormInitValues, setListFormInitValues] = useState<any[] | undefined>(undefined);
+  const [listFormInitValues, setListFormInitValues] = useState<
+    any[] | undefined
+  >(undefined);
   const { clearCacheData, setCacheData } = useFormStore(
     useShallow((state) => ({
       cacheData: state.cacheData,
@@ -135,13 +137,9 @@ export default function useFormListControl<T = any>({
     );
   };
 
-  const add = (index: number) => {
+  const add = (index?: number) => {
     setListFields((prev) => {
-      if (index > prev.length) return prev;
-
-      if (index < 0) return prev;
-
-      if (index === prev.length) {
+      if (isNil(index) || index === prev.length) {
         const newName = `${name}.${prev.length}`;
         const newKey = v4();
         const result = [
@@ -154,6 +152,9 @@ export default function useFormListControl<T = any>({
 
         return result;
       }
+      if (index > prev.length) return prev;
+
+      if (index < 0) return prev;
 
       const clonePrev = [...prev];
 
@@ -217,7 +218,15 @@ export default function useFormListControl<T = any>({
     });
   };
 
-  const move = ({ from, fromKey, to }: { from?: number; fromKey?: string; to: number }) => {
+  const move = ({
+    from,
+    fromKey,
+    to,
+  }: {
+    from?: number;
+    fromKey?: string;
+    to: number;
+  }) => {
     setListFields((prev) => {
       console.log("move list item: ", { from, to });
       if (
@@ -286,7 +295,7 @@ export default function useFormListControl<T = any>({
   useEffect(() => {
     console.log("Trigger init", formState?.isInitied, internalInitValue);
     if (formState?.isInitied) {
-        if (Array.isArray(listFormInitValues)) {
+      if (Array.isArray(listFormInitValues)) {
         const result = listFormInitValues?.map((_, i) => {
           const itemName = `${name}.${i}`;
           const key = v4();

package/src/index.ts

@@ -7,6 +7,7 @@ import Form, {
   type ValidationRule,
   type FormFieldError,
   type SubmitState,
+  type UseFormItemStateWatchReturn,
 } from "./providers/Form";
 import { SUBMIT_STATE } from "./constants/form";
 
@@ -37,6 +38,7 @@ export {
   type ValidationRule,
   type FormFieldError,
   type SubmitState,
+  type UseFormItemStateWatchReturn,
   SUBMIT_STATE,
 };
 

package/src/providers/Form.tsx

@@ -1,14 +1,23 @@
-import { cloneDeep, get, isEqual, last, set, uniq } from "lodash";
+import { cloneDeep, get, isEqual, isNil, last, set, uniqBy } from "lodash";
 import { useTask } from "minh-custom-hooks-release";
 import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
 import { createContext, useContext, useEffect, useState } from "react";
 import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
 import FormCleanUp from "../components/Form/FormCleanUp";
+import { SUBMIT_STATE } from "../constants/form";
 import { useFormListeners, useFormStore } from "../stores/formStore";
-import type { PublicFormInstance } from "../types/public";
+import type {
+  PublicFormInstance,
+  UseFormItemStateWatchReturn,
+} from "../types/public";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
-export type { ValidationRule, FormFieldError, SubmitState } from "../types/public";
+export type {
+  FormFieldError,
+  SubmitState,
+  UseFormItemStateWatchReturn,
+  ValidationRule,
+} from "../types/public";
 
 export const FormContext = createContext(null);
 
@@ -40,7 +49,7 @@ export default function Form<T = any>({
   ...props
 }: FormProps<T>) {
   const {
-    appInitValue,
+    // appInitValue,
     getFormItemValue,
     setInitData,
     setData,
@@ -54,7 +63,7 @@ export default function Form<T = any>({
     clearFormState,
   } = useFormStore(
     useShallow((state) => ({
-      appInitValue: state.initialValues,
+      // appInitValue: state.initialValues,
       setInitData: state.setInitData,
       getFormValues: state.getFormValues,
       setFormState: state.setFormState,
@@ -68,7 +77,7 @@ export default function Form<T = any>({
       clearFormState: state.clearFormState,
 
       // Test, nhớ xóa sau khi xong
-      formStates: state.formStates?.[formName],
+      // formStates: state.formStates?.[formName],
     })),
   );
 
@@ -165,8 +174,8 @@ export default function Form<T = any>({
 
         const resultValues = cloneDeep(formValues);
         const cleanValues = {} as T;
-        uniq(listeners, (l) => l.name).forEach((l) => {
-          set(cleanValues, l.name, get(resultValues, l.name));
+        uniqBy(listeners, (l: any) => l.name).forEach((l) => {
+          set(cleanValues as any, l.name, get(resultValues, l.name));
         });
 
         const handleIsolateCase = async () => {
@@ -271,6 +280,7 @@ export default function Form<T = any>({
       setFormState({
         formName,
         isInitied: false,
+        submitState: SUBMIT_STATE.IDLE,
       }),
     );
     const totalListenerFields = getListeners();
@@ -403,9 +413,11 @@ export function useFormContext() {
 export function useForm<T = any>(
   formNameOrFormInstance?: string | PublicFormInstance<T>,
 ) {
-  const targetFormName =
-    typeof formNameOrFormInstance === "object" &&
-    formNameOrFormInstance !== null
+  const formContext = useContext(FormContext);
+  const targetFormName = isNil(formNameOrFormInstance)
+    ? formContext?.formName
+    : typeof formNameOrFormInstance === "object" &&
+        formNameOrFormInstance !== null
       ? (formNameOrFormInstance as PublicFormInstance<T>).formName
       : (formNameOrFormInstance as string | undefined);
 
@@ -472,7 +484,33 @@ export const useFormStateWatch = <T = any,>(
   return formState as any;
 };
 
+// Get Form Item State Using name (make sure no same name listener before using this) or formItemId, formNameOrFormInstance
+// reutrn formItem state like isTouched, isDirty, errors
+export const useFormItemStateWatch = <T = any,>(
+  nameOrFormItemId: string,
+  formNameOrFormInstance?: string | PublicFormInstance<T>,
+): UseFormItemStateWatchReturn => {
+  const [formInstance] = useForm<T>(formNameOrFormInstance as any);
+
+  const listener = useFormStore((state) => {
+    return state
+      .getListeners()
+      .find(
+        (l) =>
+          l.formName === formInstance?.formName &&
+          (l.name === nameOrFormItemId || l.formItemId === nameOrFormItemId),
+      );
+  });
+
+  return {
+    isTouched: listener?.isTouched,
+    isDirty: listener?.isDirty,
+    errors: listener?.internalErrors || [],
+  };
+};
+
 Form.useForm = useForm;
 Form.useWatch = useWatch;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
+Form.useFormItemStateWatch = useFormItemStateWatch;

package/src/stores/formStore.ts

@@ -375,6 +375,7 @@ export const useFormListeners = create<any>((storeSet: any, storeGet: any) => ({
     internalErrors,
     onFocus,
     emitFocus,
+    isInitied,
   }) {
     return storeSet(
       produce<any>((state: any) => {
@@ -412,17 +413,22 @@ export const useFormListeners = create<any>((storeSet: any, storeGet: any) => ({
             storeListeners[findListenerIndex].emitFocus = emitFocus;
           }
 
+          if (!isNil(isInitied)) {
+            storeListeners[findListenerIndex].isInitied = isInitied;
+          }
+
           return;
         }
         storeListeners.push({
           name,
           formName,
-          isTouched,
-          isDirty,
+          isTouched: Boolean(isTouched),
+          isDirty: Boolean(isDirty),
           formItemId,
           internalErrors,
           onChange,
           onReset,
+          isInitied: Boolean(isInitied),
         });
       }),
     );

package/src/types/public.ts

@@ -67,6 +67,12 @@ export interface UseFormItemReturn<T = any> {
   submitState?: SubmitState;
 }
 
+export interface UseFormItemStateWatchReturn {
+  isTouched?: boolean;
+  isDirty?: boolean;
+  errors: FormFieldError[];
+}
+
 export interface UseFormListProps<T = any> {
   name?: string;
   form?: PublicFormInstance<T>;