Form Model 模式支持动态增/删表单项方案

[cpylua]

目标

和 View 模式的 destroyOnUnmount 保持一致的行为，提供两种能力

• 一种是下次加回来的时候能够保留上一次的数据
• 另一种是下次加回来的时候是一份全新的数据

设计

主要涉及三块改动：

1. FormSetModel 和 FormModel 支持增/删子 model
2. FormArrayModel 支持增/删子 model
3. Builder API 支持触发局部 build 的能力

FormSetModel 和 FormModel

// 这两个函数现在就有，暴露出去就行
registerChild(name: string, model: BasicModel): void;
removeChild(name: string): BasicModel;

removeChild 会返回当前的 model，下次调用 registerChild 的时候如果把上次的 model 直接加回去，那就能实现数据保留；如果不希望保留上次的数据，调用 registerChild 的时候传一个新的 model 就行了。

FormArrayModel

数组的情况要复杂一些，现在的 mutation API 参数都是值，而不是 model，所以需要提供一套新的 API 才能和 FormSetModel API 行为上保持一致性。

// 重载现有的这几个方法，支持传入 Model 对象
push(...models: BasicModel[]): number;
unshift(...models: BasicModel[]): number;
splice(start: number, deleteCount: number, ...models: BasicModel[]): BasicModel[];

数据保留/数据丢弃的做法和 FormSetModel 一致。

Builder API

当前 Builder API 的使用姿势：

const builder = form({
  number: field("").validators(Validators.required("{i18n.totalNumberError}")),
  members: array(
    set({
      name: field("")
        .validators(Validators.required("{i18n.nameValidationError}"))
        .normalizeBeforeSubmit((name) => name.toUpperCase()),
      gender: field("1").validators(
        Validators.required("{i18n.sexValidationError}")
      ),
      hobbies: array(
        field("").validators(Validators.required("{i18n.hobbyValidation}"))
      ).defaultValue([]),
    })
  ),
});

要做触发局部 build 缺少一个重要能力：通过类似对象属性/数组下标的方式访问内层 Builder 的能力。

期望的用法

// FieldModel
builder.get("number").build();

// FieldArrayModel
builder.get("members").build();

// FieldSetModel
builder.get("memebers").unwrap().build();

// FieldModel
builder.get("memebers").unwrap().get("gender").build();

API 设计

如果能够推导出返回的 Builder 类型，那么可以把范型参数去了，实现的时候看下。

1. FieldSetBuilder 和 FormBuilder

get<T extends BasicBuilder>(name: string): T;

2. FieldArrayBuilder

unwrap<T extends BasicBuilder>(): T

如何访问 Form 的 builder？

每个通过 Builder API 常见的 model 对象上都有一个 builder 属性，通过该属性就能获取用于生成这个 model 的 Builder 对象。

表单项增/删触发组件重绘

提供一个新的 hook useNamedChildModel，这个 hook 会在 FieldSetModel 或者 FormModel 的 child 发生增/删时触发 React 的重绘。注意，useNamedChildModel 不会在 child 内部的值发生变化触发重绘。

[wjw99830]

暴露基础的model增删api可能会产生比较多的样板代码，可以考虑以下2种方案：

1. 仍然暴露api，但提供新的api简化UI状态与model绑定的写法（实际业务场景复杂，不一定能满足所有场景）
2. 隐藏增删的api，在parent model的增删api上增加额外参数，例如keepAlive，以及通知model引用变更的回调

[youngBrain1893]

1. FormArrayModel 可能大多数情况下还需要提供一个 删除所有/添加所有 的 API（不提供可以通过 removeChild 移除整个 arrayModel）
2. builder 是否可以保存在 model 上，当表单项拆分时，如果都需要感知到整个 builder 的结构，表单项很难做到独立拆分