Form Effect Hooks

onFormInit

描述

用于监听某个表单初始化的副作用钩子，我们在调用 createForm 的时候就会触发初始化事件

签名

interface onFormInit {
  (callback: (form: Form) => void)
}

用例

Response：表单已初始化

<script setup lang="ts">
import { createForm, onFormInit } from '@silver-formily/core'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}

createForm({
  effects() {
    onFormInit(() => {
      setResponse('表单已初始化')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response" />
</template>

查看源码

onFormMount

描述

用于监听表单已挂载的副作用钩子，我们在调用 onMount 的时候就会触发挂载事件

签名

interface onFormMount {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormMount } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormMount(() => {
      setResponse('表单已挂载')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.onMount()
      }"
    >
      挂载表单
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormUnmount

描述

用于监听表单已卸载的副作用钩子，我们在调用 onUnmount 的时候就会触发卸载事件

签名

interface onFormUnmount {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormUnmount } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormUnmount(() => {
      setResponse('表单已卸载')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.onUnmount()
      }"
    >
      卸载表单
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormReact

描述

用于实现表单响应式逻辑的副作用钩子，它的核心原理就是表单初始化的时候会执行回调函数，同时自动追踪依赖，依赖数据发生变化时回调函数会重复执行

签名

interface onFormReact {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormReact } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormReact((form) => {
      if (form.values.input === 'Hello') {
        setResponse('响应Hello')
      }
      else if (form.values.input === 'World') {
        setResponse('响应World')
      }
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.setValuesIn('input', 'Hello')
      }"
    >
      Hello
    </ElButton>
    <ElButton
      @click="() => {
        form.setValuesIn('input', 'World')
      }"
    >
      World
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormValuesChange

描述

用于监听表单值变化的副作用钩子

签名

interface onFormValuesChange {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormValuesChange } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormValuesChange((form) => {
      setResponse(`表单值变化: ${form.values.input}`)
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.setValuesIn('input', 'Hello World')
      }"
    >
      Hello World
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormInitialValuesChange

描述

用于监听表单默认值变化的副作用钩子

签名

interface onFormInitialValuesChange {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormInitialValuesChange } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormInitialValuesChange((form) => {
      setResponse(`表单默认值变化: ${form.values.input}`)
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.setInitialValuesIn('input', 'Hello World')
      }"
    >
      Hello World
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormInputChange

描述

用于监听字段输入的副作用钩子

签名

interface onFormInputChange {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormInputChange } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormInputChange((form) => {
      setResponse(`字符输入变化: ${form.values.input}`)
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form
          .createField({
            name: 'input',
          })
          .onInput('Hello World')
      }"
    >
      Hello World
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormSubmit

描述

用于监听表单提交的副作用钩子

签名

interface onFormSubmit {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormSubmit } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormSubmit(() => {
      setResponse('表单已提交')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.submit()
      }"
    >
      Submit
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormSubmitStart

描述

用于监听表单提交开始的副作用钩子

签名

interface onFormSubmitStart {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormSubmitStart } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormSubmitStart(() => {
      setResponse('表单提交开始')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.submit()
      }"
    >
      Submit
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormSubmitEnd

描述

用于监听表单提交结束的副作用钩子

签名

interface onFormSubmitEnd {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormSubmitEnd } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormSubmitEnd(() => {
      setResponse('表单提交结束')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.submit()
      }"
    >
      Submit
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormSubmitFailed

描述

用于监听表单提交失败的副作用钩子

签名

interface onFormSubmitFailed {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormSubmitFailed } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormSubmitFailed(() => {
      setResponse('表单提交失败')
    })
  },
})
const form2 = createForm({
  effects() {
    onFormSubmitFailed(() => {
      setResponse('表单校验失败')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.submit(() => {
          throw new Error('Runtime Error')
        })
      }"
    >
      Submit Runtime Error
    </ElButton>
    <ElButton
      @click="() => {
        form2.createField({
          name: 'input',
          required: true,
        })
        form2.submit()
      }"
    >
      Submit Validate Error
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormSubmitSuccess

描述

用于监听表单提交成功的副作用钩子

签名

interface onFormSubmitSuccess {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormSubmitSuccess } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormSubmitSuccess(() => {
      setResponse('表单提交成功')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.submit()
      }"
    >
      Submit
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormSubmitValidateStart

描述

用于监听表单提交过程的字段校验开始的副作用钩子

签名

interface onFormSubmitValidateStart {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormSubmitValidateStart } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormSubmitValidateStart(() => {
      setResponse('表单提交校验开始')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.createField({
          name: 'input',
          required: true,
        })
        form.submit()
      }"
    >
      Submit
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormSubmitValidateEnd

描述

用于监听表单提交过程的字段校验结束的副作用钩子

签名

interface onFormSubmitValidateEnd {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormSubmitValidateEnd } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormSubmitValidateEnd(() => {
      setResponse('表单提交校验结束')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.createField({
          name: 'input',
          required: true,
        })
        form.submit()
      }"
    >
      Submit
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormSubmitValidateFailed

描述

用于监听表单提交过程的字段校验失败的副作用钩子

签名

interface onFormSubmitValidateFailed {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormSubmitValidateFailed } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormSubmitValidateFailed(() => {
      setResponse('表单提交校验失败')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.createField({
          name: 'input',
          required: true,
        })
        form.submit()
      }"
    >
      Submit
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormSubmitValidateSuccess

描述

用于监听表单提交过程的字段校验成功的副作用钩子

签名

interface onFormSubmitValidateSuccess {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormSubmitValidateSuccess } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormSubmitValidateSuccess(() => {
      setResponse('表单提交校验成功')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.createField({
          name: 'input',
        })
        form.submit()
      }"
    >
      Submit
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormValidateStart

描述

用于监听表单校验开始的副作用钩子

签名

interface onFormValidateStart {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormValidateStart } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormValidateStart(() => {
      setResponse('表单校验开始')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.createField({
          name: 'input',
          required: true,
        })
        form.validate()
      }"
    >
      Submit
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormValidateEnd

描述

用于监听表单校验结束的副作用钩子

签名

interface onFormValidateEnd {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormValidateEnd } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormValidateEnd(() => {
      setResponse('表单校验结束')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.createField({
          name: 'input',
          required: true,
        })
        form.validate()
      }"
    >
      Submit
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormValidateFailed

描述

用于监听表单校验失败的副作用钩子

签名

interface onFormValidateFailed {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormValidateFailed } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormValidateFailed(() => {
      setResponse('表单校验失败')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.createField({
          name: 'input',
          required: true,
        })
        form.validate()
      }"
    >
      Submit
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFormValidateSuccess

描述

用于监听表单校验开始的副作用钩子

签名

interface onFormValidateSuccess {
  (callback: (form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFormValidateSuccess } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onFormValidateSuccess(() => {
      setResponse('表单校验成功')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.createField({
          name: 'input',
        })
        form.validate()
      }"
    >
      Submit
    </ElButton>
  </ActionResponse>
</template>

查看源码

Form Effect Hooks ​

onFormInit ​

描述 ​

签名 ​

用例 ​

onFormMount ​

描述 ​

签名 ​

用例 ​

onFormUnmount ​

描述 ​

签名 ​

用例 ​

onFormReact ​

描述 ​

签名 ​

用例 ​

onFormValuesChange ​

描述 ​

签名 ​

用例 ​

onFormInitialValuesChange ​

描述 ​

签名 ​

用例 ​

onFormInputChange ​

描述 ​

签名 ​

用例 ​

onFormSubmit ​

描述 ​

签名 ​

用例 ​

onFormSubmitStart ​

描述 ​

签名 ​

用例 ​

onFormSubmitEnd ​

描述 ​

签名 ​

用例 ​

onFormSubmitFailed ​

描述 ​

签名 ​

用例 ​

onFormSubmitSuccess ​

描述 ​

签名 ​

用例 ​

onFormSubmitValidateStart ​

描述 ​

签名 ​

用例 ​

onFormSubmitValidateEnd ​

描述 ​

签名 ​

用例 ​

onFormSubmitValidateFailed ​

描述 ​

签名 ​

用例 ​

onFormSubmitValidateSuccess ​

描述 ​

签名 ​

用例 ​

onFormValidateStart ​

描述 ​

签名 ​

用例 ​

onFormValidateEnd ​

描述 ​

签名 ​

用例 ​

onFormValidateFailed ​

描述 ​

签名 ​

用例 ​

onFormValidateSuccess ​

描述 ​

签名 ​

Form Effect Hooks

onFormInit

描述

签名

用例

onFormMount

描述

签名

用例

onFormUnmount

描述

签名

用例

onFormReact

描述

签名

用例

onFormValuesChange

描述

签名

用例

onFormInitialValuesChange

描述

签名

用例

onFormInputChange

描述

签名

用例

onFormSubmit

描述

签名

用例

onFormSubmitStart

描述

签名

用例

onFormSubmitEnd

描述

签名

用例

onFormSubmitFailed

描述

签名

用例

onFormSubmitSuccess

描述

签名

用例

onFormSubmitValidateStart

描述

签名

用例

onFormSubmitValidateEnd

描述

签名

用例

onFormSubmitValidateFailed

描述

签名

用例

onFormSubmitValidateSuccess

描述

签名

用例

onFormValidateStart

描述

签名

用例

onFormValidateEnd

描述

签名

用例

onFormValidateFailed

描述

签名

用例

onFormValidateSuccess

描述

签名