Field Effect Hooks

onFieldInit

描述

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

签名

interface onFieldInit {
  (pattern: FormPathPattern, callback: (field: Field, form: Form) => void)
}

FormPathPattern的语法格式请参考 FormPath

用例

<script setup lang="ts">
import { createForm, onFieldInit } 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() {
    onFieldInit('target', () => {
      setResponse('target已初始化')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.createField({ name: 'target' })
      }"
    >
      创建字段
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFieldMount

描述

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

签名

interface onFieldMount {
  (pattern: FormPathPattern, callback: (field: Field, form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFieldMount } 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() {
    onFieldMount('target', () => {
      setResponse('target已挂载')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.createField({ name: 'target' }).onMount()
      }"
    >
      创建并挂载字段
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFieldUnmount

描述

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

签名

interface onFieldUnmount {
  (pattern: FormPathPattern, callback: (field: Field, form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFieldMount, onFieldUnmount } 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() {
    onFieldMount('target', () => {
      setResponse('target已挂载')
    })
    onFieldUnmount('target', () => {
      setResponse('target已卸载')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.createField({ name: 'target' }).onMount()
      }"
    >
      创建并挂载字段
    </ElButton>
    <ElButton
      @click="() => {
        form.createField({ name: 'target' }).onUnmount()
      }"
    >
      卸载字段
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFieldReact

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

签名

interface onFieldReact {
  (pattern: FormPathPattern, callback: (field: Field, form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFieldReact } 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(form) {
    onFieldReact('target', () => {
      setResponse(
        `target ${form.values.other === 123 ? '显示' : '隐藏'}`,
      )
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.createField({ name: 'target' })
      }"
    >
      初始化target
    </ElButton>
    <ElButton
      @click="() => {
        const field = form.createField({ name: 'other' })
        field.setValue(123)
      }"
    >
      赋值other = 123
    </ElButton>
    <ElButton
      @click="() => {
        const field = form.createField({ name: 'other' })
        field.setValue(null)
      }"
    >
      赋值other = null
    </ElButton>
  </ActionResponse>
</template>

查看源码

该示例会追踪 values.other 的变化，如果等于 123，就会控制 target 显示，否则隐藏

onFieldChange

描述

用于监听某个字段的属性变化的副作用钩子

签名

interface onFieldChange {
  (
    pattern: FormPathPattern,
    watches?: string[],
    callback: (field: Field, form: Form) => void
  )
  (pattern: FormPathPattern, callback: (field: Field, form: Form) => void)
}

可以传入具体要监听的的属性集合，也可以不传，默认是监听 value 变化

用例

<script setup lang="ts">
import { createForm, isField, onFieldChange } 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() {
    onFieldChange('target', (field) => {
      isField(field) && setResponse(`target值变化：${field.value}`)
    })
    onFieldChange('target', ['component'], () => {
      setResponse('target组件变化')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        const field = form.createField({ name: 'target' })
        field.setValue(field.value ? field.value + 1 : 1)
      }"
    >
      设置值
    </ElButton>
    <ElButton
      @click="() => {
        const field = form.createField({ name: 'target' })
        field.setComponent('Input')
      }"
    >
      设置组件
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFieldValueChange

用于监听某个字段值变化的副作用钩子

签名

interface onFieldValueChange {
  (pattern: FormPathPattern, callback: (field: Field, form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFieldValueChange } 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() {
    onFieldValueChange('target', (field) => {
      setResponse(`target值变化：${field.value}`)
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        const field = form.createField({ name: 'target' })
        field.setValue(field.value ? field.value + 1 : 1)
      }"
    >
      设置值
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFieldInitialValueChange

用于监听某个字段默认值变化的副作用钩子

签名

interface onFieldInitialValueChange {
  (pattern: FormPathPattern, callback: (field: Field, form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFieldInitialValueChange } 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() {
    onFieldInitialValueChange('target', (field) => {
      setResponse(`target默认值变化：${field.value}`)
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        const field = form.createField({ name: 'target' })
        field.setInitialValue(field.value ? field.value + 1 : 1)
      }"
    >
      设置值
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFieldInputValueChange

用于监听某个字段 onInput 触发的副作用钩子

签名

interface onFieldInputValueChange {
  (pattern: FormPathPattern, callback: (field: Field, form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFieldInputValueChange } 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() {
    onFieldInputValueChange('target', (field) => {
      setResponse(`target 值变化：${field.value}`)
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        const field = form.createField({ name: 'target' })
        field.onInput(field.value ? field.value + 1 : 1)
      }"
    >
      调用onInput
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFieldValidateStart

描述

监听某个字段校验触发开始的副作用钩子

签名

interface onFieldValidateStart {
  (pattern: FormPathPattern, callback: (field: Field, form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFieldValidateStart } 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() {
    onFieldValidateStart('target', () => {
      setResponse('target校验开始')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        const field = form.createField({ name: 'target', required: true })
        field.onInput('')
      }"
    >
      触发校验
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFieldValidateEnd

描述

监听某个字段校验触发结束的副作用钩子

签名

interface onFieldValidateEnd {
  (pattern: FormPathPattern, callback: (field: Field, form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFieldValidateEnd } 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() {
    onFieldValidateEnd('target', () => {
      setResponse('target校验结束')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        const field = form.createField({ name: 'target', required: true })
        field.onInput('')
      }"
    >
      触发校验
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFieldValidateFailed

描述

监听某个字段校验触发失败的副作用钩子

签名

interface onFieldValidateFailed {
  (pattern: FormPathPattern, callback: (field: Field, form: Form) => void)
}

用例

<script setup lang="ts">
import { createForm, onFieldValidateFailed } 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() {
    onFieldValidateFailed('target', () => {
      setResponse('target校验失败')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        const field = form.createField({ name: 'target', required: true })
        field.onInput('')
      }"
    >
      触发校验
    </ElButton>
  </ActionResponse>
</template>

查看源码

onFieldValidateSuccess

描述

监听某个字段校验触发成功的副作用钩子

签名

interface onFieldValidateSuccess {
  (pattern: FormPathPattern, callback: (field: Field, form: Form) => void)
}

用例

<script setup lang="ts">
import {
  createForm,
  onFieldValidateFailed,
  onFieldValidateSuccess,
} 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() {
    onFieldValidateFailed('target', () => {
      setResponse('target校验失败')
    })
    onFieldValidateSuccess('target', () => {
      setResponse('target校验成功')
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        const field = form.createField({ name: 'target', required: true })
        field.onInput('')
      }"
    >
      触发失败
    </ElButton>
    <ElButton
      @click="() => {
        const field = form.createField({ name: 'target', required: true })
        field.onInput('123')
      }"
    >
      触发成功
    </ElButton>
  </ActionResponse>
</template>

查看源码

Field Effect Hooks ​

onFieldInit ​

描述 ​

签名 ​

用例 ​

onFieldMount ​

描述 ​

签名 ​

用例 ​

onFieldUnmount ​

描述 ​

签名 ​

用例 ​

onFieldReact ​

签名 ​

用例 ​

onFieldChange ​

描述 ​

签名 ​

用例 ​

onFieldValueChange ​

签名 ​

用例 ​

onFieldInitialValueChange ​

签名 ​

用例 ​

onFieldInputValueChange ​

签名 ​

用例 ​

onFieldValidateStart ​

描述 ​

签名 ​

用例 ​

onFieldValidateEnd ​

描述 ​

签名 ​

用例 ​

onFieldValidateFailed ​

描述 ​

签名 ​

用例 ​

onFieldValidateSuccess ​

描述 ​

签名 ​

用例 ​

Field Effect Hooks

onFieldInit

描述

签名

用例

onFieldMount

描述

签名

用例

onFieldUnmount

描述

签名

用例

onFieldReact

签名

用例

onFieldChange

描述

签名

用例

onFieldValueChange

签名

用例

onFieldInitialValueChange

签名

用例

onFieldInputValueChange

签名

用例

onFieldValidateStart

描述

签名

用例

onFieldValidateEnd

描述

签名

用例

onFieldValidateFailed

描述

签名

用例

onFieldValidateSuccess

描述

签名

用例