Silver Formily Core0.0.0-alpha.0

简体中文

English

简体中文

English

Appearance

FormEffectHooks ​

表单级别的副作用 Hook 集合，用于在 Form 生命周期事件中注册回调

描述 ​

FormEffectHooks 是一组在 Form effects 函数中使用的 Hook，用于监听表单级别的生命周期事件。每个 Hook 对应 LifeCycleTypes 中的一个生命周期类型。

所有 Form 副作用 Hook ​

生命周期类 ​

Hook生命周期类型触发时机
onFormInitON_FORM_INIT表单初始化
onFormMountON_FORM_MOUNT表单挂载
onFormUnmountON_FORM_UNMOUNT表单卸载

值变化类 ​

Hook生命周期类型触发时机
onFormValuesChangeON_FORM_VALUES_CHANGE表单 values 变化
onFormInitialValuesChangeON_FORM_INITIAL_VALUES_CHANGE表单 initialValues 变化
onFormInputChangeON_FORM_INPUT_CHANGE表单输入变化

提交类 ​

Hook生命周期类型触发时机
onFormSubmitON_FORM_SUBMIT表单提交
onFormSubmitStartON_FORM_SUBMIT_START表单提交开始
onFormSubmittingON_FORM_SUBMITTING表单正在提交
onFormSubmitEndON_FORM_SUBMIT_END表单提交结束
onFormSubmitSuccessON_FORM_SUBMIT_SUCCESS表单提交成功
onFormSubmitFailedON_FORM_SUBMIT_FAILED表单提交失败

提交校验类 ​

Hook生命周期类型触发时机
onFormSubmitValidateStartON_FORM_SUBMIT_VALIDATE_START提交校验开始
onFormSubmitValidateSuccessON_FORM_SUBMIT_VALIDATE_SUCCESS提交校验成功
onFormSubmitValidateFailedON_FORM_SUBMIT_VALIDATE_FAILED提交校验失败
onFormSubmitValidateEndON_FORM_SUBMIT_VALIDATE_END提交校验结束

校验类 ​

Hook生命周期类型触发时机
onFormValidateStartON_FORM_VALIDATE_START表单校验开始
onFormValidatingON_FORM_VALIDATING表单正在校验
onFormValidateSuccessON_FORM_VALIDATE_SUCCESS表单校验成功
onFormValidateFailedON_FORM_VALIDATE_FAILED表单校验失败
onFormValidateEndON_FORM_VALIDATE_END表单校验结束

其他 ​

Hook生命周期类型触发时机
onFormGraphChangeON_FORM_GRAPH_CHANGE表单字段图变化
onFormLoadingON_FORM_LOADING表单加载状态变化
onFormResetON_FORM_RESET表单重置

用法 ​

所有 Form Hook 遵循统一签名：

txt
onFormXxx(callback: (form: Form) => void): void

基本用法 ​

ts
import { createForm, onFormMount, onFormSubmit } from '@silver-formily/core'

const form = createForm({
  effects() {
    onFormMount((form) => {
      console.log('表单已挂载', form.mounted)
    })

    onFormSubmit((form) => {
      console.log('表单提交:', form.values)
    })
  },
})

完整的提交流程监听 ​

ts
import {
  createForm,
  onFormSubmitEnd,
  onFormSubmitFailed,
  onFormSubmitStart,
  onFormSubmitSuccess,
  onFormSubmitValidateFailed,
  onFormSubmitValidateStart,
  onFormSubmitValidateSuccess,
} from '@silver-formily/core'

const form = createForm({
  effects() {
    onFormSubmitStart((form) => {
      console.log('submit start')
    })

    onFormSubmitValidateStart((form) => {
      console.log('validate start')
    })

    onFormSubmitValidateSuccess((form) => {
      console.log('validate success')
    })

    onFormSubmitValidateFailed((form) => {
      console.log('validate failed:', form.errors)
    })

    onFormSubmitSuccess((form) => {
      console.log('submit success:', form.values)
    })

    onFormSubmitFailed((form) => {
      console.log('submit failed:', form.errors)
    })

    onFormSubmitEnd((form) => {
      console.log('submit end')
    })
  },
})

onFormReact ​

特殊的响应式副作用，会自动追踪表单状态变化：

ts
onFormReact((form) => {
  // 自动追踪 form 上读取的所有 observable 属性
  // 任意属性变化时重新执行
  console.log(form.values)
  console.log(form.valid)
})

等价于 onFormInit + autorun 的组合。