update

example/src/FormDemo.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import Card from "./components/Card" 
 import Network from './forms/network';
 import JsonViewer from "./components/JsonViewer" 
@@ -7,8 +7,7 @@ import classnames from 'classnames';
 import { ReactFC } from "./types"; 
 import ColorBlock from "./components/ColorBlock";
 import { Loading } from "./components/Loading"; 
-import { Button } from "./components/Button";
-import { ActionRunOptions } from '../../packages/form/src/action';
+import { Button } from "./components/Button"; 
 
 const FieldRow:ReactFC<{label?:string,visible?:boolean,enable?:boolean}> = ({enable,visible,label,children})=>{
  return (

example/src/forms/network.tsx

@@ -6,7 +6,13 @@ import validator from "validator";
 let count =1 
 // 声明表单数据
 const formSchema = {
- diary: computed<boolean>(()=>{
+ dirty: computed<boolean>(()=>{
+ return true
+ }),
+ onlyReady: computed<boolean>(()=>{
+ return true
+ },{depends:[]}),
+ submiting: computed<boolean>(()=>{
  return true
  },{depends:[]}),
  fields: {

packages/form/src/action.tsx

@@ -300,6 +300,7 @@ export function action<Values extends Dict=Dict,R=any>(getter: AsyncComputedGett
 
 export type SubmitAsyncComputedGetter<R> = AsyncComputedGetter<R,FormData>
 
+
 /**
  * 将传一个FormData对象
  * @param getter 

packages/form/src/field.tsx

@@ -1,10 +1,11 @@
 import React, { ChangeEventHandler, ReactNode, useCallback, useEffect, useMemo,useRef,useState } from "react"; 
 import { getVal, setVal } from "@helux/utils";
 import { debounce as debounceWrapper } from './utils';
-import { ComputedAttr, Dict } from "./types"; 
+import { ComputedAttr } from "./types"; 
 import { assignObject } from "flex-tools/object/assignObject"; 
 import type { FormOptions } from "./form";
 import { FIELDS_STATE_KEY } from "./consts"; 
+import { Dict } from "helux-store";
 
 // 默认同步字段属性
 export interface DefaultFieldPropTypes{

packages/form/src/serialize.ts

@@ -1,8 +1,11 @@
 /**
  * 序列化表单数据
  * 
- * 负责从表单schema中读取数据，生成表单数据
+ * 1. 负责从表单状态中读取数据，用于生成表单对象或提交API
+ * 2. 将表单数据转换为表单状态
  * 
+ * getFormData 从表单状态中生成表单数据
+ * loadDataToForm 将表单数据加载到表单状态中
  * 
  */
 
@@ -92,15 +95,53 @@ export function getFormData(snap:Dict,options?:GetFormDataOptions):Record<string
  return getFiledGroupValue(snap)
 }
 
+
+export interface LoadFormDataOptions{
+ onNotMatch(keyPath:string[]):any
+}
+
 /**
- * 加载表单数据
+ * 
+ * 加载表单数据到指定的表单状态入口
+ * 
+ * 由于可能存在数据结构与表单结构不匹配的情况，所以需要提供一个onNotMatch回调来处理
+ * 
+ * 注意：加载时建议关闭依赖收集
+ * 
  */ 
-export function loadFormData(this:any,data:Dict){ 
-
+export function loadDataToForm( toFormState:Dict,fromData:Dict,options?:LoadFormDataOptions){ 
+ const { onNotMatch=()=>{} } = Object.assign({},options) 
+ function loadFromGroup(data:Dict,groupState:Dict,parentKeys:string[]=[]){ 
+ Object.entries(data).forEach(([key,value])=>{
+ if(typeof(key) !== 'string') return
+ const curKeys = [...parentKeys,key]
+ if(key in groupState){ 
+ const itemState = groupState[key]
+ if(isFieldValue(itemState)){
+ itemState.value = value
+ }else if(isFieldGroup(itemState)){
+ if(isPlainObject(value)){
+ loadFromGroup(value,itemState,curKeys)
+ }else{ 
+ onNotMatch(curKeys)// 不匹配
+ }
+ }else if(isFieldList(itemState)){
+ if(Array.isArray(value)){
+ loadFromGroup(value,itemState)
+ }else{ 
+ onNotMatch(curKeys)// 不匹配
+ } 
+ }else{
+ groupState[key] = value
+ }
+ }else{
+ onNotMatch(curKeys)
+ }
+ })
+ }
+ loadFromGroup(fromData,toFormState)
 }
-
-
-
+
 export interface CreateFormDataOptions{
  // 用来实现将keyPath转换为表单项名称
  getItemName?:(keyPath:string[])=>string
@@ -109,14 +150,13 @@ export interface CreateFormDataOptions{
  */
  getItemValue?:(keyPath:string[],type?:'array' | 'object' | '')=>string
 }
+
 
 
 /**
  * 
  * 根据一个Dict生成一个表单数据对象，用来提交
- * 
- * 
- * 
+ * 
  * @param data 
  */
 export function createFormData(data:Dict,options?:CreateFormDataOptions):FormData{