Silver Formily Core1.0.1

English

简体中文

English

简体中文

Appearance

Field Effect Hooks ​

onFieldInit ​

Description ​

Side-effect hook for listening to the initialization of a specific field. The initialization event is triggered when createField is called.

Signature ​

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

For the syntax of FormPathPattern, see FormPath.

Usage ​

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

Description ​

Side-effect hook for listening to when a specific field has been mounted. The mount event is triggered when onMount is called.

Signature ​

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

Usage ​

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

Description ​

Side-effect hook for listening to when a specific field has been unmounted. The unmount event is triggered when onUnmount is called.

Signature ​

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

Usage ​

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

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

Signature ​

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

Usage ​

<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>
查看源码

This example tracks changes to values.other. If it equals 123, it shows target; otherwise it hides it.

onFieldChange ​

Description ​

Side-effect hook for listening to property changes on a specific field.

Signature ​

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

You can pass a specific list of properties to watch, or omit it. By default, it watches value changes.

Usage ​

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

Side-effect hook for listening to value changes of a specific field.

Signature ​

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

Usage ​

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

Side-effect hook for listening to initial value changes of a specific field.

Signature ​

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

Usage ​

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

Side-effect hook for listening to the effects triggered by onInput on a specific field.

Signature ​

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

Usage ​

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

Description ​

Side-effect hook for listening to the start of validation on a specific field.

Signature ​

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

Usage ​

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

Description ​

Side-effect hook for listening to the end of validation on a specific field.

Signature ​

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

Usage ​

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

Description ​

Side-effect hook for listening to validation failure on a specific field.

Signature ​

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

Usage ​

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

Description ​

Side-effect hook for listening to validation success on a specific field.

Signature ​

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

Usage ​

<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>
查看源码