@fairys/valtio-form-basic 0.0.13 → 1.0.1

package/lib/form/form.d.ts

@@ -3,7 +3,7 @@ import { FairysValtioFormInstance } from '../common/instance';
 import { type ReactNode } from 'react';
 import { FairysValtioFormLayoutAttrsProps } from './layout';
 import { RuleItem } from 'async-validator';
-export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> extends FairysValtioFormLayoutAttrsProps {
+export interface FairysValtioFormAttrsProps<T extends MObject<T> = Record<string, any>> extends FairysValtioFormLayoutAttrsProps {
     /**表单实例*/
     form?: FairysValtioFormInstance<T>;
     /**子元素*/
@@ -20,6 +20,12 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
      * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
      */
     initFormDataType?: 'deepCopy' | 'immutable';
+    /**
+     * 表单值改变时回调
+     * @param path 表单项路径
+     * @param value 表单项值
+     */
+    onValuesChange?: (path: PropertyKey, value: any) => void;
 }
 /**
  * 表单属性处理
@@ -41,36 +47,6 @@ export const Form = (props: FormProps) => {
 }
  * ```
 */
-export declare function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): {
+export declare function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): Omit<FairysValtioFormAttrsProps<T>, "initFormDataType" | "form" | "rules" | "formData" | "hideState" | "onValuesChange"> & {
     formInstance: FairysValtioFormInstance<T>;
-    /**子元素*/
-    children: ReactNode;
-    gap?: string | number;
-    title?: React.ReactNode;
-    extra?: React.ReactNode;
-    isAllColSpan?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    headerClassName?: string;
-    headerStyle?: React.CSSProperties;
-    bodyClassName?: string;
-    bodyStyle?: React.CSSProperties;
-    bordered?: boolean;
-    boxShadow?: boolean;
-    lastItemBordered?: boolean;
-    platform?: "pc" | "rn" | "taro";
-    colCount?: number;
-    errorLayout?: "bottom-left" | "bottom-right" | "top-right" | "top-left" | "left-border-top" | "right-border-top";
-    labelMode?: "left" | "top" | "between";
-    formItemClassName?: string;
-    formItemStyle?: React.CSSProperties;
-    formItemLabelClassName?: string;
-    formItemLabelStyle?: React.CSSProperties;
-    formItemBodyClassName?: string;
-    formItemBodyStyle?: React.CSSProperties;
-    itemBorderType?: "bottom" | "body" | "none";
-    itemBorderColor?: React.CSSProperties["borderColor"];
-    isInvalidBorderRed?: boolean;
-    isInvalidTextRed?: boolean;
-    showColon?: boolean;
 };

package/lib/form/form.item.d.ts

@@ -5,7 +5,7 @@ import { FairysValtioFormInstance } from '../common/instance';
 import { FairysValtioFormLayoutContextOptions } from './layout';
 import { FairysValtioFormParentAttrs } from '../common/hooks';
 import { RuleItem } from 'async-validator';
-export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
+export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = Record<string, any>> {
     /**平台*/
     platform?: 'pc' | 'rn' | 'taro';
     /**
@@ -77,6 +77,10 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
     isJoinParentField?: boolean;
     /**校验规则*/
     rules?: RuleItem[];
+    /**卸载移除数据值
+     * @default true
+     */
+    isRemoveValueOnUnmount?: boolean;
 }
 /**
  * 处理表单表单项属性
@@ -121,8 +125,8 @@ export const FormItem = (props: FormItemProps) => {
  * ```
  *
 */
-export declare function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemAttrsReturn<T>;
-export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object> {
+export declare function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemAttrsReturn<T>;
+export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = Record<string, any>> {
     /**表单项值*/
     value?: any;
     /**是否校验错误*/
@@ -207,18 +211,36 @@ export const FormItem = (props: FormItemProps) => {
 }
  * ```
 */
-export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>): {
-    value: unknown;
-    error: string[];
+export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemNoStyleAttrsReturn<T>;
+export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = Record<string, any>> {
+    /**表单项值*/
+    value?: any;
+    /**是否校验错误*/
+    isInvalid: boolean;
+    /**是否必填*/
+    isRequired: boolean;
+    /**错误信息*/
+    error?: string[];
+    /**值改变事件*/
     onValueChange: (event: any) => void;
+    /**表单状态*/
     state: T;
+    /**错误状态*/
     errorState: Record<PropertyKey, string[]>;
+    /**表单实例*/
     formInstance: FairysValtioFormInstance<T>;
-    _name: string;
-    name: string;
-    id: string;
-    paths: (number | symbol)[] | (string | number)[];
-    parentName: string;
+    /**拼接父级字段名后得到的表单项名称*/
+    _name?: string;
+    /**表单项名称*/
+    name?: string;
+    /**表单项ID*/
+    id?: string;
+    /**表单项路径*/
+    paths?: (string | number)[];
+    /**父级字段名*/
+    parentName?: string;
+    /**表单属性名实例*/
     formAttrsNameInstance: FairysValtioFormParentAttrs;
-    children: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>;
-};
+    /**子元素*/
+    children?: React.ReactNode;
+}

package/lib/form/form.item.js

@@ -61,7 +61,7 @@ function useFairysValtioFormItemAttrs(props) {
     const parent_isInvalidTextRed = layoutAttrs.isInvalidTextRed;
     const parent_showColon = layoutAttrs.showColon;
     const parent_platform = layoutAttrs.platform;
-    const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', className, style, labelClassName, labelStyle, bodyClassName, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, rowSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, isJoinParentField = true, rules, platform = parent_platform } = props;
+    const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', className, style, labelClassName, labelStyle, bodyClassName, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, rowSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, isJoinParentField = true, rules, platform = parent_platform, isRemoveValueOnUnmount = true } = props;
     const { name: _name, paths, parentName, formAttrsNameInstance } = (0, hooks_index_js_namespaceObject.useFairysValtioFormAttrsName)({
         name,
         isJoinParentField
@@ -94,6 +94,9 @@ function useFairysValtioFormItemAttrs(props) {
         formInstance.updatedValueByPaths(_name, _value);
         if ('function' == typeof onAfterUpdate) onAfterUpdate(_value, formInstance, event);
     };
+    (0, external_react_namespaceObject.useEffect)(()=>()=>{
+            if (isRemoveValueOnUnmount) formInstance.removeValueByPaths(_name);
+        }, []);
     const baseControl = {
         ...attrs,
         name,
@@ -253,7 +256,7 @@ function useFairysValtioFormItemAttrs(props) {
     };
 }
 function useFairysValtioFormItemNoStyleAttrs(props) {
-    const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules } = props;
+    const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, isRemoveValueOnUnmount = true, isRequired: _isRequired } = props;
     const [state, errorState, formInstance] = (0, index_js_namespaceObject.useFairysValtioFormInstanceContextState)();
     const { name: _name, paths, parentName, formAttrsNameInstance } = (0, hooks_index_js_namespaceObject.useFairysValtioFormAttrsName)({
         name,
@@ -266,6 +269,7 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
     ]);
     const error = errorState[_name];
     formInstance.nameToPaths[_name] = paths;
+    const _formItemRules = formInstance.rules?.[_name];
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
         return ()=>{
@@ -285,6 +289,9 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
         formInstance.updatedValueByPaths(_name, _value);
         if ('function' == typeof onAfterUpdate) onAfterUpdate(_value, formInstance, event);
     };
+    (0, external_react_namespaceObject.useEffect)(()=>()=>{
+            if (isRemoveValueOnUnmount) formInstance.removeValueByPaths(_name);
+        }, []);
     const baseControl = {
         ...attrs,
         name,
@@ -292,8 +299,26 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
         [valuePropName]: value,
         [trigger]: onValueChange
     };
+    const isRequired = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (_isRequired) return _isRequired;
+        if (Array.isArray(rules) && rules.length) return rules.some((rule)=>rule.required);
+        if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) return _formItemRules.some((rule)=>rule.required);
+        return false;
+    }, [
+        rules,
+        formInstance,
+        _formItemRules
+    ]);
+    const isInvalid = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (Array.isArray(error) && error.length) return true;
+        return false;
+    }, [
+        error
+    ]);
     return {
         value,
+        isInvalid,
+        isRequired,
         error,
         onValueChange,
         state,

package/lib/form/form.js

@@ -29,9 +29,10 @@ __webpack_require__.d(__webpack_exports__, {
 const index_js_namespaceObject = require("../common/instance/index.js");
 const external_react_namespaceObject = require("react");
 function useFairysValtioForm(props, ref) {
-    const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
+    const { form, rules, formData, hideState, initFormDataType = 'deepCopy', onValuesChange, ...rest } = props;
     const formInstance = (0, index_js_namespaceObject.useFairysValtioFormInstance)(form);
     formInstance.rules = rules;
+    formInstance.onValuesChange = onValuesChange;
     (0, external_react_namespaceObject.useMemo)(()=>formInstance.ctor({
             formData,
             hideState,

package/package.json

@@ -3,7 +3,7 @@
   "author": "SunLxy <1011771396@qq.com>",
   "description": "使用 valtio 实现的表单基础库, 使其更加便捷，同时支持`PC`、`H5`、`Taro`，同时也更加灵活。",
   "homepage": "https://github.com/autumn-fairy-tales/valtio-form-basic",
-  "version": "0.0.13",
+  "version": "1.0.1",
   "main": "lib/index.js",
   "types": "esm/index.d.ts",
   "module": "esm/index.js",

package/src/common/instance/index.ts

@@ -3,11 +3,17 @@ import { createContext, useContext, useRef } from 'react';
 import { proxy, ref, snapshot, useSnapshot, unstable_getInternalStates } from 'valtio';
 import AsyncValidator, { RuleItem, ValidateFieldsError, Values } from 'async-validator';
 import { copy } from 'fast-copy';
-import { formatePath, get, set, isObject } from 'common/utils';
+import { formatePath, get, set, isObject, removeValueByPaths } from 'common/utils';
 import { FairysValtioFormAttrsProps } from 'form/form';
 
 /**表单实例*/
 export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>> {
+  /**
+   * 表单值改变时回调
+   * @param path 表单项路径
+   * @param value 表单项值
+   */
+  onValuesChange?: (path: PropertyKey, value: any) => void;
   /***
    * 判断值是否为代理对象
    * @param value 值
@@ -46,25 +52,26 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
     initFormDataType?: FairysValtioFormAttrsProps['initFormDataType'];
   }) => {
     const { formData, hideState, initFormDataType = 'deepCopy' } = options || {};
-    this.mountRules = {}; //由表单项挂载规则,(根据表单项的字段存储路径对应校验规则)
-    this.nameToPaths = {}; //表单项名称到路径映射
-    // 如果是 isProxy,则直接赋值
-    this.errorState = proxy<Record<PropertyKey, string[]>>({});
-    this.hideState = proxy<Record<PropertyKey, boolean>>(hideState ? copy(hideState) : {});
+    this.clear();
+    this.updatedHideInfo(hideState ? copy(hideState) : {});
     // 判断是否是代理对象
     const isValtioProxy = this.isValtioProxy(formData);
     if (isValtioProxy) {
       if (initFormDataType === 'deepCopy') {
-        this.state = proxy(copy(snapshot(formData)) as T);
+        // this.state = proxy(copy(snapshot(formData)) as T);
+        this.updated(copy(snapshot(formData)) as T, false);
       } else {
-        this.state = formData as T;
+        // this.state = formData as T;
+        this.updated(formData as T, false);
       }
     } else {
       if (initFormDataType === 'deepCopy') {
-        this.state = proxy(copy(formData || {}) as T);
+        // this.state = proxy(copy(formData || {}) as T);
+        this.updated(copy(formData || {}) as T, false);
       }
       {
-        this.state = proxy((formData || {}) as T);
+        // this.state = proxy((formData || {}) as T);
+        this.updated((formData || {}) as T, false);
       }
     }
   };
@@ -91,7 +98,28 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
   updatedValueByPaths = (path: PropertyKey, value: any) => {
     set(this.state, formatePath(path), value);
     this.validate([path], false);
+    this.onValuesChange?.(path, value);
+  };
+
+  /**表单项卸载移除保存值*/
+  removeValueByPaths = (path: PropertyKey) => {
+    removeValueByPaths(this.state, formatePath(path));
   };
+  /**
+   * 清理值
+   */
+  clearValue = (fields?: PropertyKey[]) => {
+    let _fields = fields;
+    if (!Array.isArray(fields)) {
+      _fields = Object.keys(this.state) as PropertyKey[];
+    }
+    for (let index = 0; index < _fields.length; index++) {
+      const field = _fields[index];
+      delete this.state[field];
+    }
+    return this;
+  };
+
   // ===================================================隐藏状态================================================================
   /**
    * 更新行数据的隐藏信息
@@ -154,9 +182,9 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
    * 清理所有数据
    */
   clear = () => {
-    this.state = proxy<T>({} as T); //表单值
-    this.errorState = proxy<Record<PropertyKey, string[]>>({}); //错误信息
-    this.hideState = proxy<Record<PropertyKey, boolean>>({}); //隐藏状态
+    this.clearValue();
+    this.clearHideInfo();
+    this.clearErrorInfo();
     this.mountRules = {}; //由表单项挂载规则,(根据表单项的字段存储路径对应校验规则)
     this.rules = {}; //表单项规则
     this.nameToPaths = {}; //表单项名称到路径映射
@@ -177,7 +205,10 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
    * @param fields 要验证的字段(可选)
    * @param isReturn 是否返回验证结果(可选)
    */
-  validate = async (fields?: PropertyKey[], isReturn: boolean = true): Promise<ValidateFieldsError | Values> => {
+  validate = async (
+    fields?: PropertyKey[],
+    isReturn: boolean = true,
+  ): Promise<ValidateFieldsError | Values | Partial<T>> => {
     const rules = {
       ...this.rules,
       ...this.mountRules,
@@ -251,7 +282,9 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
 }
 
 /**声明实例*/
-export function useFairysValtioFormInstance<T extends MObject<T> = object>(instance?: FairysValtioFormInstance<T>) {
+export function useFairysValtioFormInstance<T extends MObject<T> = Record<string, any>>(
+  instance?: FairysValtioFormInstance<T>,
+) {
   const ref = useRef<FairysValtioFormInstance<T>>();
   if (!ref.current) {
     if (instance) {
@@ -269,12 +302,12 @@ export const FairysValtioFormInstanceContext = createContext<FairysValtioFormIns
 );
 
 /**表单实例上下文*/
-export function useFairysValtioFormInstanceContext<T extends MObject<T> = object>() {
+export function useFairysValtioFormInstanceContext<T extends MObject<T> = Record<string, any>>() {
   return useContext(FairysValtioFormInstanceContext) as FairysValtioFormInstance<T>;
 }
 
 /**状态取值*/
-export function useFairysValtioFormInstanceContextState<T extends MObject<T> = object>() {
+export function useFairysValtioFormInstanceContextState<T extends MObject<T> = Record<string, any>>() {
   const instance = useFairysValtioFormInstanceContext<T>();
   const state = useSnapshot(instance.state) as T;
   const errorState = useSnapshot(instance.errorState) as Record<PropertyKey, string[]>;
@@ -288,7 +321,7 @@ export function useFairysValtioFormInstanceContextState<T extends MObject<T> = o
 }
 
 /**隐藏组件状态取值*/
-export function useFairysValtioFormInstanceContextHideState<T extends MObject<T> = object>() {
+export function useFairysValtioFormInstanceContextHideState<T extends MObject<T> = Record<string, any>>() {
   const instance = useFairysValtioFormInstanceContext<T>();
   const hideState = useSnapshot(instance.hideState) as Record<PropertyKey, boolean>;
   return [hideState, instance, (hideState as any).__defaultValue] as [
@@ -297,3 +330,21 @@ export function useFairysValtioFormInstanceContextHideState<T extends MObject<T>
     any,
   ];
 }
+/**
+ * 传递表单实例获取状态
+ */
+export function useFairysValtioFormInstanceToState<T extends MObject<T> = Record<string, any>>(
+  formInstance: FairysValtioFormInstance<T>,
+) {
+  const state = useSnapshot(formInstance.state) as T;
+  return state as T;
+}
+/**
+ * 传递表单实例获取隐藏状态
+ */
+export function useFairysValtioFormInstanceToHideState<T extends MObject<T> = Record<string, any>>(
+  formInstance: FairysValtioFormInstance<T>,
+) {
+  const hideState = useSnapshot(formInstance.hideState) as Record<PropertyKey, boolean>;
+  return hideState as Record<PropertyKey, boolean>;
+}

package/src/common/utils/index.ts

@@ -50,6 +50,25 @@ export function get<TDefault = unknown>(value: any, segments: PropertyKey[]): TD
   return current;
 }
 
+/***
+ * 移除值
+ * @param value 任意值
+ * @param segments 键路径
+ */
+export function removeValueByPaths(value: any, segments: PropertyKey[]) {
+  // 移除字段
+  let current: any = value;
+  const lg = segments.length;
+  for (let index = 0; index < lg; index++) {
+    const key = segments[index];
+    if (index === lg - 1) {
+      delete current[key];
+    } else {
+      current = current?.[key];
+    }
+  }
+}
+
 /***
  * 格式化路径，将路径中的数组索引转换为数字
  * @param path 路径

package/src/form/form.item.tsx

@@ -9,7 +9,7 @@ import { FairysValtioFormParentAttrs, useFairysValtioFormAttrsName, useId } from
 import { formatePath, get } from 'common/utils';
 import { RuleItem } from 'async-validator';
 
-export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
+export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = Record<string, any>> {
   /**平台*/
   platform?: 'pc' | 'rn' | 'taro';
   /**
@@ -81,6 +81,10 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
   isJoinParentField?: boolean;
   /**校验规则*/
   rules?: RuleItem[];
+  /**卸载移除数据值
+   * @default true
+   */
+  isRemoveValueOnUnmount?: boolean;
 }
 
 /**
@@ -126,7 +130,9 @@ export const FormItem = (props: FormItemProps) => {
  * ```
  * 
 */
-export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>) {
+export function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<string, any>>(
+  props: FairysValtioFormItemAttrsProps<T>,
+) {
   const [layoutAttrs] = useFairysValtioFormLayoutContext();
   const colCount = layoutAttrs.colCount || 1;
   const parent_borderedType = layoutAttrs.itemBorderType || 'bottom';
@@ -173,6 +179,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     isJoinParentField = true,
     rules,
     platform = parent_platform,
+    isRemoveValueOnUnmount = true,
   } = props;
 
   const {
@@ -217,6 +224,14 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     }
   };
 
+  useEffect(() => {
+    return () => {
+      if (isRemoveValueOnUnmount) {
+        formInstance.removeValueByPaths(_name);
+      }
+    };
+  }, []);
+
   /**基础组件参数*/
   const baseControl = {
     ...attrs,
@@ -420,7 +435,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   } as FairysValtioFormItemAttrsReturn<T>;
 }
 
-export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object> {
+export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = Record<string, any>> {
   /**表单项值*/
   value?: any;
   /**是否校验错误*/
@@ -507,7 +522,7 @@ export const FormItem = (props: FormItemProps) => {
 }
  * ```
 */
-export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = object>(
+export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Record<string, any>>(
   props: FairysValtioFormItemAttrsProps<T>,
 ) {
   const {
@@ -522,6 +537,8 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = objec
     attrs = {},
     isJoinParentField = true,
     rules,
+    isRemoveValueOnUnmount = true,
+    isRequired: _isRequired,
   } = props;
   const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState<T>();
   const {
@@ -534,6 +551,8 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = objec
   const value = useMemo(() => get(state, paths), [state, paths]);
   const error = errorState[_name];
   formInstance.nameToPaths[_name] = paths;
+  // 使用从 Form 中设置的规则
+  const _formItemRules = formInstance.rules?.[_name];
 
   useEffect(() => {
     if (Array.isArray(rules) && rules.length) {
@@ -563,6 +582,15 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = objec
       onAfterUpdate(_value, formInstance, event);
     }
   };
+
+  useEffect(() => {
+    return () => {
+      if (isRemoveValueOnUnmount) {
+        formInstance.removeValueByPaths(_name);
+      }
+    };
+  }, []);
+
   /**基础组件参数*/
   const baseControl = {
     ...attrs,
@@ -571,8 +599,30 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = objec
     [valuePropName]: value,
     [trigger]: onValueChange,
   };
+
+  /**判断是否必填*/
+  const isRequired = useMemo(() => {
+    if (_isRequired) {
+      return _isRequired;
+    } else if (Array.isArray(rules) && rules.length) {
+      return rules.some((rule) => rule.required);
+    } else if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) {
+      return _formItemRules.some((rule) => rule.required);
+    }
+    return false;
+  }, [rules, formInstance, _formItemRules]);
+
+  /**校验是否存在错误信息*/
+  const isInvalid = useMemo(() => {
+    if (Array.isArray(error) && error.length) {
+      return true;
+    }
+    return false;
+  }, [error]);
   return {
     value,
+    isInvalid,
+    isRequired,
     error,
     onValueChange,
     state,
@@ -585,5 +635,38 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = objec
     parentName,
     formAttrsNameInstance,
     children: React.isValidElement(children) ? React.cloneElement(children, { ...baseControl }) : children,
-  };
+  } as FairysValtioFormItemNoStyleAttrsReturn<T>;
+}
+
+export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = Record<string, any>> {
+  /**表单项值*/
+  value?: any;
+  /**是否校验错误*/
+  isInvalid: boolean;
+  /**是否必填*/
+  isRequired: boolean;
+  /**错误信息*/
+  error?: string[];
+  /**值改变事件*/
+  onValueChange: (event: any) => void;
+  /**表单状态*/
+  state: T;
+  /**错误状态*/
+  errorState: Record<PropertyKey, string[]>;
+  /**表单实例*/
+  formInstance: FairysValtioFormInstance<T>;
+  /**拼接父级字段名后得到的表单项名称*/
+  _name?: string;
+  /**表单项名称*/
+  name?: string;
+  /**表单项ID*/
+  id?: string;
+  /**表单项路径*/
+  paths?: (string | number)[];
+  /**父级字段名*/
+  parentName?: string;
+  /**表单属性名实例*/
+  formAttrsNameInstance: FairysValtioFormParentAttrs;
+  /**子元素*/
+  children?: React.ReactNode;
 }

package/src/form/form.tsx

@@ -4,7 +4,8 @@ import { useImperativeHandle, useMemo, type ReactNode, useEffect } from 'react';
 import { FairysValtioFormLayoutAttrsProps } from './layout';
 import { RuleItem } from 'async-validator';
 
-export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> extends FairysValtioFormLayoutAttrsProps {
+export interface FairysValtioFormAttrsProps<T extends MObject<T> = Record<string, any>>
+  extends FairysValtioFormLayoutAttrsProps {
   /**表单实例*/
   form?: FairysValtioFormInstance<T>;
   /**子元素*/
@@ -21,6 +22,12 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
    * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
    */
   initFormDataType?: 'deepCopy' | 'immutable';
+  /**
+   * 表单值改变时回调
+   * @param path 表单项路径
+   * @param value 表单项值
+   */
+  onValuesChange?: (path: PropertyKey, value: any) => void;
 }
 
 /**
@@ -43,14 +50,16 @@ export const Form = (props: FormProps) => {
 }
  * ```
 */
-export function useFairysValtioForm<T extends MObject<T> = object>(
+export function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(
   props: FairysValtioFormAttrsProps<T>,
   ref: React.Ref<FairysValtioFormInstance<T>>,
 ) {
-  const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
+  const { form, rules, formData, hideState, initFormDataType = 'deepCopy', onValuesChange, ...rest } = props;
   const formInstance = useFairysValtioFormInstance(form);
   /**表单规则*/
   formInstance.rules = rules;
+  /**表单值改变时回调*/
+  formInstance.onValuesChange = onValuesChange;
   /**初始化表单值*/
   useMemo(() => formInstance.ctor({ formData, hideState, initFormDataType }), []);
   useImperativeHandle(ref, () => formInstance);
@@ -59,5 +68,10 @@ export function useFairysValtioForm<T extends MObject<T> = object>(
   return {
     ...rest,
     formInstance,
+  } as Omit<
+    FairysValtioFormAttrsProps<T>,
+    'initFormDataType' | 'form' | 'rules' | 'formData' | 'hideState' | 'onValuesChange'
+  > & {
+    formInstance: FairysValtioFormInstance<T>;
   };
 }