Form Effect Hooks

onFormInit

Description

Side-effect hook for listening to form initialization. The initialization event is triggered when createForm is called.

Signature

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

Usage

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

Description

Side-effect hook for listening to when the form has been mounted. The mount event is triggered when onMount is called.

Signature

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

Usage

<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

Description

Side-effect hook for listening to when the form has been unmounted. The unmount event is triggered when onUnmount is called.

Signature

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

Usage

<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

Description

Side-effect hook for implementing reactive form logic. Its core behavior is that the callback runs when the form is initialized, automatically tracks dependencies, and re-runs whenever the tracked dependencies change.

Signature

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

Usage

<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

Description

Side-effect hook for listening to form value changes.

Signature

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

Usage

<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

Description

Side-effect hook for listening to form initial value changes.

Signature

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

Usage

<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

Description

Side-effect hook for listening to field input.

Signature

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

Usage

<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

Description

Side-effect hook for listening to form submission.

Signature

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

Usage

<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

Description

Side-effect hook for listening to the start of form submission.

Signature

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

Usage

<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

Description

Side-effect hook for listening to the end of form submission.

Signature

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

Usage

<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

Description

Side-effect hook for listening to failed form submission.

Signature

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

Usage

<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

Description

Side-effect hook for listening to successful form submission.

Signature

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

Usage

<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

Description

Side-effect hook for listening to the start of field validation during form submission.

Signature

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

Usage

<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

Description

Side-effect hook for listening to the end of field validation during form submission.

Signature

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

Usage

<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

Description

Side-effect hook for listening to failed field validation during form submission.

Signature

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

Usage

<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

Description

Side-effect hook for listening to successful field validation during form submission.

Signature

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

Usage

<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

Description

Side-effect hook for listening to the start of form validation.

Signature

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

Usage

<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

Description

Side-effect hook for listening to the end of form validation.

Signature

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

Usage

<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

Description

Side-effect hook for listening to failed form validation.

Signature

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

Usage

<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

Description

Side-effect hook for listening to successful form validation.

Signature

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

Usage

<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 ​

Description ​

Signature ​

Usage ​

onFormMount ​

Description ​

Signature ​

Usage ​

onFormUnmount ​

Description ​

Signature ​

Usage ​

onFormReact ​

Description ​

Signature ​

Usage ​

onFormValuesChange ​

Description ​

Signature ​

Usage ​

onFormInitialValuesChange ​

Description ​

Signature ​

Usage ​

onFormInputChange ​

Description ​

Signature ​

Usage ​

onFormSubmit ​

Description ​

Signature ​

Usage ​

onFormSubmitStart ​

Description ​

Signature ​

Usage ​

onFormSubmitEnd ​

Description ​

Signature ​

Usage ​

onFormSubmitFailed ​

Description ​

Signature ​

Usage ​

onFormSubmitSuccess ​

Description ​

Signature ​

Usage ​

onFormSubmitValidateStart ​

Description ​

Signature ​

Usage ​

onFormSubmitValidateEnd ​

Description ​

Signature ​

Usage ​

onFormSubmitValidateFailed ​

Description ​

Signature ​

Usage ​

onFormSubmitValidateSuccess ​

Description ​

Signature ​

Usage ​

onFormValidateStart ​

Description ​

Signature ​

Usage ​

onFormValidateEnd ​

Description ​

Signature ​

Usage ​

onFormValidateFailed ​

Description ​

Signature ​

Usage ​

onFormValidateSuccess ​

Description ​

Signature ​

Form Effect Hooks

onFormInit

Description

Signature

Usage

onFormMount

Description

Signature

Usage

onFormUnmount

Description

Signature

Usage

onFormReact

Description

Signature

Usage

onFormValuesChange

Description

Signature

Usage

onFormInitialValuesChange

Description

Signature

Usage

onFormInputChange

Description

Signature

Usage

onFormSubmit

Description

Signature

Usage

onFormSubmitStart

Description

Signature

Usage

onFormSubmitEnd

Description

Signature

Usage

onFormSubmitFailed

Description

Signature

Usage

onFormSubmitSuccess

Description

Signature

Usage

onFormSubmitValidateStart

Description

Signature

Usage

onFormSubmitValidateEnd

Description

Signature

Usage

onFormSubmitValidateFailed

Description

Signature

Usage

onFormSubmitValidateSuccess

Description

Signature

Usage

onFormValidateStart

Description

Signature

Usage

onFormValidateEnd

Description

Signature

Usage

onFormValidateFailed

Description

Signature

Usage

onFormValidateSuccess

Description

Signature