react-form-manage 1.0.8-beta.2 → 1.0.8-beta.21

package/dist/providers/Form.js

@@ -1,34 +1,45 @@
 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, isPlainObject, 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 { useFormListeners, useFormStore } from "../stores/formStore";
+import { SUBMIT_STATE } from "../constants/form";
+import { 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 { getListeners } = useFormListeners(useShallow((state) => {
+  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 } = useFormStore(useShallow((state) => {
     return {
       getListeners: state.getListeners
     };
@@ -36,9 +47,36 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
   const setFieldValue = (name, value, options) => {
     const listener = getListeners().find((l) => l.name === name && l.formName === formName);
     if (listener) {
-      listener.onChange(value, options);
+      if (listener.type === "array") {
+        if (!isEqual(getFormItemValue(formName, name), value)) {
+          listener.onArrayChange(value, options);
+          const allStringPath = getAllNoneObjStringPath(value);
+          allStringPath.forEach((p) => {
+            const findListener = getListeners().find((l) => l.name === `${name}.${p}` && l.formName === formName);
+            if (findListener) {
+              findListener.onChange(get(value, p), options);
+            } else {
+              setData(formName, `${name}.${p}`, get(value, p));
+            }
+          });
+        }
+      } else {
+        listener.onChange(value, options);
+      }
     } else {
-      setData(formName, name, value);
+      if (isPlainObject(value) || Array.isArray(value)) {
+        const allStringPath = getAllNoneObjStringPath(value);
+        allStringPath.forEach((p) => {
+          const findListener = getListeners().find((l) => l.name === `${name}.${p}` && l.formName === formName);
+          if (findListener) {
+            findListener.onChange(get(value, p), options);
+          } else {
+            setData(formName, `${name}.${p}`, get(value, p));
+          }
+        });
+      } else {
+        setData(formName, name, value);
+      }
     }
   };
   const setFieldValues = (values, options = { notTriggerDirty: false }) => {
@@ -46,7 +84,24 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
     allStringPath.forEach((p) => {
       const listener = getListeners().find((l) => l.name === p && l.formName === formName);
       if (listener) {
-        listener.onChange(get(values, listener.name), options);
+        if (listener.type === "array") {
+          if (!isEqual(getFormItemValue(formName, p), get(values, p))) {
+            listener.onArrayChange(get(values, listener.name), options);
+            const nestedAllStringPath = getAllNoneObjStringPath(get(values, p));
+            nestedAllStringPath.forEach((np) => {
+              {
+                const findListener = getListeners().find((l) => l.name === `${p}.${np}` && l.formName === formName);
+                if (findListener) {
+                  findListener.onChange(get(values, `${p}.${np}`), options);
+                } else {
+                  setData(formName, `${p}.${np}`, get(values, `${p}.${np}`));
+                }
+              }
+            });
+          }
+        } else {
+          listener.onChange(get(values, listener.name), options);
+        }
       } else {
         setData(formName, p, get(values, p));
       }
@@ -95,7 +150,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 +222,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 +308,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 +344,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.d.ts

@@ -1,3 +1,4 @@
+type ListenerFormItemType = "normal" | "array";
 export interface FormInstance {
     formName: string;
     resetFields: (values?: any) => void;
@@ -13,6 +14,28 @@ export interface FormInstance {
     getFieldErrors: () => Record<string, any>;
     setFieldFocus: (name: string) => void;
 }
+export interface ListenerItem {
+    name?: string;
+    formName?: string;
+    isTouched?: boolean;
+    isDirty?: boolean;
+    formItemId?: string;
+    internalErrors?: any;
+    onArrayChange?: any;
+    onChange?: any;
+    onReset?: any;
+    onFocus?: any;
+    emitFocus?: any;
+    isInitied?: boolean;
+    type?: ListenerFormItemType;
+}
+export interface CleanUpItem {
+    name?: string;
+    type?: string;
+    key: string;
+    itemKey?: string;
+    formName?: string;
+}
 interface FormStoreState {
     forms: Record<string, any>;
     initialValues: Record<string, any>;
@@ -20,9 +43,11 @@ interface FormStoreState {
     cacheData: Record<string, any>;
     formInstances: FormInstance[];
     submitHistory: Record<string, any[]>;
+    listeners: ListenerItem[];
+    cleanUpStack: CleanUpItem[];
     [key: string]: any;
 }
 export declare const useFormStore: import("zustand").UseBoundStore<import("zustand").StoreApi<FormStoreState>>;
-export declare const useFormListeners: import("zustand").UseBoundStore<import("zustand").StoreApi<any>>;
-export declare const useFormCleanUp: import("zustand").UseBoundStore<import("zustand").StoreApi<any>>;
+export declare const useFormListeners: import("zustand").UseBoundStore<import("zustand").StoreApi<FormStoreState>>;
+export declare const useFormCleanUp: import("zustand").UseBoundStore<import("zustand").StoreApi<FormStoreState>>;
 export {};

package/dist/stores/formStore.js

@@ -3,7 +3,7 @@ import { cloneDeep, get, isNil, isNumber, last, set, unset } from "lodash";
 import { v4 } from "uuid";
 import { create } from "zustand";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
-const useFormStore = create((storeSet, storeGet) => ({
+const createFormStoreSlice = (storeSet, storeGet, api) => ({
   forms: {},
   initialValues: {},
   formStates: {},
@@ -191,8 +191,8 @@ const useFormStore = create((storeSet, storeGet) => ({
       }
     }));
   }
-}));
-const useFormListeners = create((storeSet, storeGet) => ({
+});
+const createListenersSlice = (storeSet, storeGet, api) => ({
   listeners: [],
   getListener(formItemId) {
     return storeGet().listeners.find((l) => l.formItemId === formItemId);
@@ -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, type, onArrayChange }) {
     return storeSet(produce((state) => {
       const storeListeners = state.listeners;
       const findListenerIndex = state.listeners.findIndex((l) => l.formItemId === formItemId);
@@ -232,17 +232,26 @@ const useFormListeners = create((storeSet, storeGet) => ({
         if (!isNil(emitFocus)) {
           storeListeners[findListenerIndex].emitFocus = emitFocus;
         }
+        if (!isNil(isInitied)) {
+          storeListeners[findListenerIndex].isInitied = isInitied;
+        }
+        if (!isNil(onArrayChange)) {
+          storeListeners[findListenerIndex].onArrayChange = onArrayChange;
+        }
         return;
       }
       storeListeners.push({
         name,
         formName,
-        isTouched,
-        isDirty,
+        isTouched: Boolean(isTouched),
+        isDirty: Boolean(isDirty),
         formItemId,
         internalErrors,
         onChange,
-        onReset
+        onReset,
+        isInitied: Boolean(isInitied),
+        type: type || "normal",
+        onArrayChange
       });
     }));
   },
@@ -257,8 +266,8 @@ const useFormListeners = create((storeSet, storeGet) => ({
       }
     }));
   }
-}));
-const useFormCleanUp = create((storeSet) => ({
+});
+const createCleanUpSlice = (storeSet, storeGet, api) => ({
   cleanUpStack: [],
   setCleanUpStack({ name, type, itemKey, formName }) {
     return storeSet(produce((state) => {
@@ -272,7 +281,14 @@ const useFormCleanUp = create((storeSet) => ({
       state.cleanUpStack = [];
     }));
   }
+});
+const useFormStore = create((...a) => ({
+  ...createFormStoreSlice(...a),
+  ...createListenersSlice(...a),
+  ...createCleanUpSlice(...a)
 }));
+const useFormListeners = useFormStore;
+const useFormCleanUp = useFormStore;
 export {
   useFormCleanUp,
   useFormListeners,

package/dist/test/TestDialog.d.ts

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

package/dist/test/TestDialog.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogContentText, DialogTitle, TextField } from "@mui/material";
+import { Box } from "@mui/system";
+import { useToggle } from "minh-custom-hooks-release";
+import FormItem from "../components/Form/FormItem";
+import TestSelect from "./TestSelect";
+function TestDialog({}) {
+  const { state: open, toggle } = useToggle();
+  return _jsxs(Box, { children: [_jsxs(Dialog, { open, onClose: toggle, children: [_jsx(DialogTitle, { children: "Test Dialog" }), _jsxs(DialogContent, { children: [_jsx(DialogContentText, { children: "This is a test dialog." }), _jsx(FormItem, { rules: [
+    {
+      handler(value) {
+        return Boolean(value);
+      },
+      message: "Testt"
+    }
+  ], controlAfterInit: true, initialValue: null, name: "testSelectInsideDialog", children: _jsx(TestSelect, {}) }), _jsx(FormItem, { controlAfterInit: true, initialValue: "", name: "anotherField", children: _jsx(TextField, {}) })] })] }), _jsx(Button, { variant: "contained", onClick: toggle, children: "Open Test Dialog" })] });
+}
+var stdin_default = TestDialog;
+export {
+  stdin_default as default
+};

package/dist/test/TestListener.d.ts

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

package/dist/test/TestListener.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneDeep } from "lodash";
+import { useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useFormStore } from "../stores/formStore";
+function TestListener({}) {
+  const { listeners } = useFormStore(useShallow((state) => ({
+    listeners: state.listeners
+  })));
+  useEffect(() => {
+  }, [listeners]);
+  return _jsx("div", { children: "TestListener" });
+}
+var stdin_default = TestListener;
+export {
+  stdin_default as default
+};

package/dist/test/TestSelect.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    value?: any;
+    onChange?: (value: any) => void;
+};
+declare function TestSelect({ value, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+export default TestSelect;

package/dist/test/TestSelect.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Autocomplete, TextField } from "@mui/material";
+function TestSelect({ value = null, onChange }) {
+  return _jsx(Autocomplete, { value, onChange: (_, newValue) => {
+    onChange == null ? void 0 : onChange(newValue);
+  }, renderInput: (params) => _jsx(TextField, { ...params }), options: [
+    {
+      value: "option1",
+      label: "Option 1"
+    },
+    {
+      value: "option2",
+      label: "Option 2"
+    }
+  ], getOptionKey: (o) => {
+    return o == null ? void 0 : o.value;
+  }, getOptionLabel: (o) => {
+    return o == null ? void 0 : o.label;
+  } });
+}
+var stdin_default = TestSelect;
+export {
+  stdin_default as default
+};

package/dist/types/index.d.ts

@@ -1 +1 @@
-export * from './public';
+export * from "./public";

package/dist/types/public.d.ts

@@ -1,5 +1,5 @@
-import type { GetConstantType } from "./util";
 import type { SUBMIT_STATE } from "../constants/form";
+import type { GetConstantType } from "./util";
 export type FormValues<T = any> = T;
 export interface FormFieldError {
     ruleName: string | number;
@@ -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/dist/utils/obj.util.d.ts

@@ -1,2 +1,2 @@
-export declare function getAllNoneObjStringPath(value: any, prevPath?: string): any;
+export declare function getAllNoneObjStringPath(value: any, prevPath?: string): string[];
 export declare function getAllStringPath(value: any, prevPath?: string): any;

package/dist/utils/obj.util.js

@@ -1,14 +1,25 @@
-import { filter, isNil, join } from "lodash";
+import { filter, isNil, isPlainObject, join } from "lodash";
 function getAllNoneObjStringPath(value, prevPath = "") {
-  if (typeof value === "object") {
-    return Object.keys(value).reduce((prev, cur) => {
+  if (value === null || value === void 0 || typeof value !== "object" || typeof value === "function") {
+    return [prevPath];
+  }
+  if (Array.isArray(value)) {
+    return value.reduce((prev, item, index) => {
       return [
         ...prev,
-        ...getAllNoneObjStringPath(value[cur], join(filter([prevPath, cur], (v) => !isNil(v) && v !== ""), "."))
+        ...getAllNoneObjStringPath(item, join(filter([prevPath, String(index)], (v) => !isNil(v) && v !== ""), "."))
       ];
     }, []);
   }
-  return [prevPath];
+  if (!isPlainObject(value)) {
+    return [prevPath];
+  }
+  return Object.keys(value).reduce((prev, cur) => {
+    return [
+      ...prev,
+      ...getAllNoneObjStringPath(value[cur], join(filter([prevPath, cur], (v) => !isNil(v) && v !== ""), "."))
+    ];
+  }, []);
 }
 function getAllStringPath(value, prevPath = "") {
   if (typeof value === "object") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.0.8-beta.2",
+  "version": "1.0.8-beta.21",
   "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,26 @@
+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 TestDialog from "./test/TestDialog";
+
+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,16 +30,31 @@ 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: "",
           numericCode: "",
-          arr: [{ el: "Item 1" }, { el: "Item 2" }],
+          // arr: [{ el: "Item 1" }, { el: "Item 2" }],
         }}
         onFinish={(values) => {
           console.log(values);
         }}
         formName={"form1"}
+        // hidden
       >
         <FormItem
           name={"username"}
@@ -36,12 +64,15 @@ const App = () => {
               message: "Test",
             },
           ]}
+          initialValue={"283746"}
+          // hidden
         >
           <InputWrapper>
             <Input />
           </InputWrapper>
         </FormItem>
 
+        {/* Numberic test */}
         <FormItem
           name={"numericCode"}
           rules={[
@@ -56,10 +87,25 @@ 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={[
             {
-              el: "",
+              el: "sdfsdf",
+              d: { child: "Test Child" },
             },
           ]}
           name="arr"
@@ -68,7 +114,15 @@ const App = () => {
             <div>
               {fields.map((field, index) => (
                 <div key={field.key} style={{ marginBottom: 8 }}>
-                  <FormItem name={`${field.name}.el`}>
+                  <FormItem name={`${field.name}.el`} initialValue={"Chém gió"}>
+                    <InputWrapper>
+                      <Input placeholder="Item value" style={{ width: 200 }} />
+                    </InputWrapper>
+                  </FormItem>
+                  <FormItem
+                    name={`${field.name}.d.child`}
+                    initialValue={"Con của item"}
+                  >
                     <InputWrapper>
                       <Input placeholder="Item value" style={{ width: 200 }} />
                     </InputWrapper>
@@ -101,12 +155,52 @@ const App = () => {
             </div>
           )}
         </FormList>
+        <TestDialog />
+        <Button
+          onClick={() => {
+            form?.setFieldValue("arr", [
+              { el: "Set Item 1" },
+              { el: "Set Item 2" },
+              { el: "Set Item 3" },
+            ]);
+          }}
+        >
+          Test set array list value
+        </Button>
+        <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>
   );