FormStore

通过createFormStore可以返回一个FormStore对象，通过该对象，可以在RdxFormContext外部对表单进行控制

class FormStore<
  GSource extends Record<string, any>,
  GCompoonentPropss extends IComponents
> {
  // 获取表单的衍生状态的值
  getComputeState(): GSource;
  // 获取表单的值
  getState(): GSource;
  // 设置表单状态
  setValue<T extends any>(value: RdxStateAndReference<T>, newValue: T): void
  // 订阅表单整体的状态
  subscribeAll(callback: (v: GSource) => void): void;
  // 订阅表单的状态，通过unsubscribe来取消订阅
  subscribe<
    GParams extends
      | TStringPathResolver<GSource>
      | TStringPathResolver<GSource>[]
  >(
    id: GParams,
    callback: (value: TSubscribeResult<GSource, GParams>) => void
  ): void;
  // 取消订阅表单的状态
  unsubscribe<
    GPath extends TStringPathResolver<GSource> | TStringPathResolver<GSource>[]
  >(id: GPath, callback: Function): void;
  // 对表单进行校验，可以对单个字段或者多个字段进行校验，不传或者传null则校验表单所有状态
  validate(
    id?: TStringPathResolver<GSource> | TStringPathResolver<GSource>[]
  ): Promise<IErrorMessage>;
}

简单用法

Sample

The fallback content to display on prerendering

import React, { useEffect, useRef } from 'react';
import { hippoComponents } from '@alife/hippo-form-library';
import { formBuilder, FormStore } from '@alife/rdx-form';
import { Button, Message } from '@alife/hippo';
const formFn = formBuilder({
  components: hippoComponents,
});
// 通过模型定义，创建带模型含义的表单
interface IModel {
  unit: number;
  amount: number;
  total: number;
  show: boolean;
  province: string;
  city: string;
}
const AreaForms = formFn<IModel>();
const {
  FormItem,
  RdxFormRoot,
  createFormStore,
  getReferencedFormValueAtom,
} = AreaForms;

export function Sample() {
  const formStore = useRef(createFormStore());
  const singleCallback = React.useCallback((v) => {
    console.log('v: ', v);
    Message.notice({
      content: '省份的值变化啦：' + v,
    });
  }, []);
  const globalCallback = React.useCallback((v) => {
    Message.notice({
      content: '全局值变化啦' + JSON.stringify(v),
    });
  }, []);
  return (
    <RdxFormRoot store={formStore.current}>
      <FormItem
        title='省份'
        require={true}
        name='province'
        type='string'
        componentType={'input'}
      ></FormItem>
      <FormItem
        title='城市'
        require={true}
        name='city'
        type='string'
        componentType={'input'}
      ></FormItem>
      <Button
        onClick={() => {
          formStore.current.validate('province').then((msg) => {
            if (msg.isError) {
              Message.notice({
                content: msg.errorMsg,
              });
            }
          });
        }}
      >
        校验省份
      </Button>
      <Button
        onClick={() => {
          formStore.current.validate(['province', 'city']).then((msg) => {
            if (msg.isError) {
              Message.notice({
                content: msg.errorMsg,
              });
            }
          });
        }}
      >
        校验省份&城市
      </Button>
      <Button
        onClick={() => {
          formStore.current.validate().then((msg) => {
            if (msg.isError) {
              Message.notice({
                content: msg.errorMsg,
              });
            }
          });
        }}
      >
        校验全部
      </Button>
      <Button
        onClick={() => {
          formStore.current.setValue(
            getReferencedFormValueAtom('province'),
            '浙江省'
          );
        }}
      >
        设置省份为浙江省
      </Button>
      <Button
        onClick={() => {
          formStore.current.subscribe(
            getReferencedFormValueAtom('province'),
            singleCallback
          );
        }}
      >
        开启订阅省份消息
      </Button>
      <Button
        onClick={() => {
          formStore.current.unsubscribe(
            getReferencedFormValueAtom('province'),
            singleCallback
          );
        }}
      >
        取消订阅省份消息
      </Button>
      <Button
        onClick={() => {
          formStore.current.subscribeAll(globalCallback);
        }}
      >
        开启订阅全部表单消息
      </Button>
      <Button
        onClick={() => {
          formStore.current.unsubscribeAll(globalCallback);
        }}
      >
        取消订阅全部表单消息
      </Button>
      <Button
        onClick={() => {
          Message.notice({
            content: JSON.stringify(formStore.current.getState(), null, 2)
          })
        }}
      >
        查看表单状态
      </Button>
      <Button
       onClick={() => {
        Message.notice({
          content: JSON.stringify(formStore.current.getComputeState(), null, 2)
        })
      }}
      >
        查看表单衍生状态
      </Button>
    </RdxFormRoot>
  );
}