Formily Vue

https://vue.formilyjs.org/api/
Admin
Formily Vue is a Vue implementation of form field binding that bridges ViewModel with input...
Tokens:16,626
Snippets:177
Trust Score:7.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Using useForm in a Custom Component

Source: https://vue.formilyjs.org/api/hooks/use-form.html

Example demonstrating how to access the form instance within a custom component using the observer pattern.

```javascript
<template>
  <FormProvider :form="form">
    <Space>
      <Field name="input" :component="[Input]" />
      <Field name="custom" :component="[Custom]" />
    </Space>
  </FormProvider>
</template>

<script>
import { defineComponent, h } from '@vue/composition-api'
import { createForm } from '@formily/core'
import { FormProvider, Field, useForm } from '@formily/vue'
import { observer } from '@formily/reactive-vue'
import { Input, Space } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const Custom = observer(
  defineComponent({
    setup() {
      const formRef = useForm()
      return () => {
        const form = formRef.value
        return h('div', {}, [form.values.input])
      }
    },
  })
)

export default {
  components: {
    FormProvider,
    Field,
    Space,
  },
  data() {
    const form = createForm({ validateFirst: true })
    return {
      Input,
      Custom,
      form,
    }
  },
}
</script>
```

--------------------------------

### Implementing Read-Pretty Input Component

Source: https://vue.formilyjs.org/api/shared/map-read-pretty

Example demonstrating how to use mapReadPretty to wrap an Ant Design Vue Input component for read-only display.

```vue
<template>
  <FormProvider :form="form">
    <Form layout="vertical">
      <Field
        name="name"
        title="Name"
        required
        initialValue="Hello world"
        :decorator="[FormItem]"
        :component="[Input, { placeholder: 'Please Input' }]"
      />
    </Form>
  </FormProvider>
</template>

<script>
import { Form, Input as AntdInput } from 'ant-design-vue'
import { createForm, setValidateLanguage } from '@formily/core'
import {
  FormProvider,
  Field,
  connect,
  mapProps,
  mapReadPretty,
} from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

setValidateLanguage('en')

const FormItem = connect(
  Form.Item,
  mapProps(
    {
      title: 'label',
      description: 'extra',
      required: true,
      validateStatus: true,
    },
    (props, field) => {
      return {
        ...props,
        help: field.selfErrors?.length ? field.selfErrors : undefined,
      }
    }
  )
)

const Input = connect(
  AntdInput,
  mapReadPretty({
    props: ['value'],
    // you need import "h" from "vue" in vue3
    render(h) {
      return h('div', [this.value])
    },
  })
)

export default {
  components: {
    FormProvider,
    Field,
    Form,
  },
  data() {
    const form = createForm({ validateFirst: true, readPretty: true })
    return {
      FormItem,
      Input,
      form,
    }
  },
}
</script>
```

--------------------------------

### Implementing useField in a Custom Component

Source: https://vue.formilyjs.org/api/hooks/use-field

Example demonstrating how to use useField within a custom FormItem component, wrapped in observer to ensure reactivity.

```vue
<template>
  <FormProvider :form="form">
    <Form layout="vertical">
      <Field
        name="name"
        title="Name"
        required
        :decorator="[FormItem]"
        :component="[Input, { placeholder: 'Please Input' }]"
      />
      <FormConsumer>
        <template #default="{ form }">
          <div style="white-space: pre; margin-bottom: 16px">
            {{ JSON.stringify(form.values, null, 2) }}
          </div>
          <Button
            type="primary"
            @click="
              () => {
                form.submit(log)
              }
            "
          >
            Submit
          </Button>
        </template>
      </FormConsumer>
    </Form>
  </FormProvider>
</template>

<script>
import { defineComponent, h } from '@vue/composition-api'
import { Form, Input, Button } from 'ant-design-vue'
import { createForm, setValidateLanguage } from '@formily/core'
import { FormProvider, FormConsumer, Field, useField } from '@formily/vue'
import { observer } from '@formily/reactive-vue'
import 'ant-design-vue/dist/antd.css'

setValidateLanguage('en')

const FormItem = observer(
  defineComponent({
    setup(props, { slots }) {
      const fieldRef = useField()
      return () => {
        const field = fieldRef.value
        return h(
          Form.Item,
          {
            props: {
              label: field.title,
              required: field.required,
              help: field.selfErrors?.length ? field.selfErrors : undefined,
              extra: field.description,
              validateStatus: field.validateStatus,
            },
          },
          slots?.default()
        )
      }
    },
  })
)

export default {
  components: {
    FormProvider,
    FormConsumer,
    Field,
    Form,
    Button,
  },
  data() {
    const form = createForm({ validateFirst: true })
    return {
      FormItem,
      Input,
      form,
    }
  },
  methods: {
    log(...args) {
      console.log(...args)
    },
  },
}
</script>
```

--------------------------------

### Integrate Ant Design Vue with connect

Source: https://vue.formilyjs.org/api/shared/connect.html

Example showing how to wrap an Ant Design Vue component using connect and mapProps to map Formily field properties to component props.

```vue
<template>
  <FormProvider :form="form">
    <Form layout="vertical">
      <Field
        name="name"
        title="Name"
        required
        :decorator="[FormItem]"
        :component="[Input, { placeholder: 'Please Input' }]"
      />
      <FormConsumer>
        <template #default="{ form }">
          <div style="white-space: pre; margin-bottom: 16px">
            {{ JSON.stringify(form.values, null, 2) }}
          </div>
          <Button
            type="primary"
            @click="
              () => {
                form.submit(log)
              }
            "
          >
            Submit
          </Button>
        </template>
      </FormConsumer>
    </Form>
  </FormProvider>
</template>

<script>
import { Form, Input, Button } from 'ant-design-vue'
import { createForm, setValidateLanguage } from '@formily/core'
import {
  FormProvider,
  FormConsumer,
  Field,
  connect,
  mapProps,
} from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

setValidateLanguage('en')

const FormItem = connect(
  Form.Item,
  mapProps(
    {
      title: 'label',
      description: 'extra',
      required: true,
      validateStatus: true,
    },
    (props, field) => {
      return {
        ...props,
        help: field.selfErrors?.length ? field.selfErrors : undefined,
      }
    }
  )
)

export default {
  components: {
    FormProvider,
    FormConsumer,
    Field,
    Form,
    Button,
  },
  data() {
    const form = createForm({ validateFirst: true })
    return {
      FormItem,
      Input,
      form,
    }
  },
  methods: {
    log(...args) {
      console.log(...args)
    },
  },
}
</script>
```

--------------------------------

### Implement custom component with useFormEffects

Source: https://vue.formilyjs.org/api/hooks/use-form-effects.html

Example demonstrating how to use useFormEffects within a Vue component to react to field changes and synchronize values.

```vue
<template>
  <FormProvider :form="form">
    <Field
      name="input"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: 'input' }]"
    />
    <Field name="custom" :decorator="[FormItem]" :component="[Custom]" />
  </FormProvider>
</template>

<script>
import { defineComponent, h } from '@vue/composition-api'
import { createForm, onFieldReact } from '@formily/core'
import { FormProvider, Field, useFormEffects } from '@formily/vue'
import { Form, Input } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const Custom = defineComponent({
  setup() {
    useFormEffects(() => {
      onFieldReact('custom.bb', (field) => {
        field.value = field.query('.aa').get('value')
      })
    })
    return () =>
      h('div', {}, [
        h(
          Field,
          {
            props: {
              name: 'aa',
              decorator: [Form.Item],
              component: [Input, { placeholder: 'aa' }],
            },
          },
          {}
        ),
        h(
          Field,
          {
            props: {
              name: 'bb',
              decorator: [Form.Item],
              component: [Input, { placeholder: 'bb' }],
            },
          },
          {}
        ),
      ])
  },
})

export default {
  components: {
    FormProvider,
    Field,
  },
  data() {
    const form = createForm({
      effects() {
        onFieldReact('custom.aa', (field) => {
          field.value = field.query('input').get('value')
        })
      },
    })
    return {
      FormItem: Form.Item,
      Input,
      Custom,
      form,
    }
  },
}
</script>
```

--------------------------------

### Using observer with Vue components

Source: https://vue.formilyjs.org/api/shared/observer

Wraps a component with observer to track reactive state changes, such as form values, within the setup function.

```javascript
<template>
  <FormProvider :form="form">
    <Space>
      <Field
        name="name"
        title="Name"
        required
        :component="[Input, { placeholder: 'Please Input' }]"
      />
      <FormPreviewer />
    </Space>
  </FormProvider>
</template>

<script>
import { defineComponent, h } from '@vue/composition-api'
import { createForm } from '@formily/core'
import { FormProvider, Field, useForm } from '@formily/vue'
import { observer } from '@formily/reactive-vue'
import { Input, Space } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const FormPreviewer = observer(
  defineComponent({
    name: 'FormPreviewer',
    setup() {
      const formRef = useForm()
      return () => {
        const form = formRef.value
        return h('div', [JSON.stringify(form.values)])
      }
    },
  })
)

export default {
  components: {
    FormProvider,
    Field,
    FormPreviewer,
    Space,
  },
  data() {
    const form = createForm({ validateFirst: true })
    return {
      Input,
      form,
    }
  },
}
</script>
```

--------------------------------

### RecursionField Usage Example

Source: https://vue.formilyjs.org/api/components/recursion-field.html

Demonstrates how to use RecursionField within a custom component to render nested schema properties.

```vue
<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaObjectField
        name="custom"
        x-component="Custom"
        :x-component-props="{
          schema: {
            type: 'object',
            properties: {
              input: {
                type: 'string',
                'x-component': 'Input',
              },
            },
          },
        }"
      />
    </SchemaField>
  </FormProvider>
</template>

<script>
import { Input } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField, RecursionField } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

// functional component in vue2
const Custom = {
  functional: true,
  render(h, { props }) {
    return h(RecursionField, {
      props: {
        name: props.name,
        schema: props.schema,
        onlyRenderProperties: true,
      },
    })
  },
}

const { SchemaField, SchemaObjectField } = createSchemaField({
  components: {
    Custom,
    Input,
  },
})

export default {
  components: { FormProvider, SchemaField, SchemaObjectField },
  data() {
    return {
      form: createForm(),
    }
  },
}
</script>
```

--------------------------------

### SchemaField Usage Example

Source: https://vue.formilyjs.org/api/components/schema-field

Basic implementation of SchemaField within a Vue component using FormProvider.

```vue
<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaStringField name="input" x-component="Input" />
    </SchemaField>
  </FormProvider>
</template>

<script>
import { Input } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

const { SchemaField, SchemaStringField } = createSchemaField({
  components: {
    Input,
  },
})

export default {
  components: { FormProvider, SchemaField, SchemaStringField },
  data() {
    return {
      form: createForm(),
    }
  },
}
</script>
```

--------------------------------

### Field Component Usage Example

Source: https://vue.formilyjs.org/api/components/field.html

A basic implementation of the Field component within a FormProvider, using an Ant Design Vue input component.

```vue
<template>
  <FormProvider :form="form">
    <Field name="input" :component="[Input, { placeholder: '请输入' }]" />
  </FormProvider>
</template>

<script>
import { Input } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, Field } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

export default {
  components: { FormProvider, Field },
  data() {
    return {
      Input,
      form: createForm(),
    }
  },
}
</script>
```

--------------------------------

### Control Field Visibility with VoidField

Source: https://vue.formilyjs.org/api/components/void-field.html

Example demonstrating how to use VoidField to wrap and toggle the visibility of child fields. Note that the name attribute is required for the VoidField component.

```vue
<template>
  <FormProvider :form="form">
    <Space>
      <VoidField name="layout">
        <Field name="input" :component="[Input]" />
      </VoidField>
      <FormConsumer>
        <template #default="{ form }">
          <Space>
            <Button
              @click="
                () => {
                  form
                    .query('layout')
                    .take()
                    .setState((state) => {
                      state.visible = !state.visible
                    })
                }
              "
            >
              {{ form.query('layout').get('visible') ? 'Hide' : 'Show' }}
            </Button>
            <div>{{ JSON.stringify(form.values, null, 2) }}</div>
          </Space>
        </template>
      </FormConsumer>
    </Space>
  </FormProvider>
</template>

<script>
import { Input, Space, Button } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, Field, FormConsumer, VoidField } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

export default {
  components: { FormProvider, Field, FormConsumer, VoidField, Space, Button },
  data() {
    return {
      Input,
      form: createForm(),
    }
  },
}
</script>
```

--------------------------------

### Implement useParentForm in a Vue component

Source: https://vue.formilyjs.org/api/hooks/use-parent-form.html

Example demonstrating how to use useParentForm within an observer component to access the parent form's display name.

```vue
<template>
  <FormProvider :form="form">
    <ObjectField name="object">
      <Custom></Custom>
    </ObjectField>
    <Custom></Custom>
    <VoidField name="void">
      <Custom></Custom>
    </VoidField>
  </FormProvider>
</template>

<script>
import { defineComponent, h } from '@vue/composition-api'
import { createForm } from '@formily/core'
import {
  FormProvider,
  ObjectField,
  VoidField,
  useParentForm,
} from '@formily/vue'
import { observer } from '@formily/reactive-vue'

const Custom = observer(
  defineComponent({
    setup() {
      const formRef = useParentForm()
      return () => {
        const form = formRef.value
        return h('div', {}, [form.displayName])
      }
    },
  })
)

export default {
  components: {
    FormProvider,
    ObjectField,
    VoidField,
    VoidField,
    Custom,
  },
  data() {
    const form = createForm()
    return {
      form,
    }
  },
}
</script>
```

--------------------------------

### Initialize Schema Class

Source: https://vue.formilyjs.org/api/shared/schema.html

Create a Schema Tree from JSON schema data to ensure each node contains the necessary methods.

```typescript
class Schema {
  constructor(json: ISchema, parent?: ISchema)
}
```

--------------------------------

### FormProvider

Source: https://vue.formilyjs.org/api/components/form-provider.html

The FormProvider component is the entry point for distributing form context. It requires a form instance created via createForm.

```APIDOC
## FormProvider

### Description
Entry component used to distribute form context to field components. It acts as a communication hub for the entire form state.

### Signature
```typescript
type FormProvider = Vue.Component<
  any,
  any,
  any,
  {
    form: Form // Form instance created via createForm
  }
>
```
```

--------------------------------

### enablePolyfills

Source: https://vue.formilyjs.org/api/shared/schema.html

Enables specific protocol compatibility polyfills.

```APIDOC
## enablePolyfills(versions)

### Description
Activates compatibility polyfills for the specified versions.

### Signature
`enablePolyfills(versions: string[]): void`
```

--------------------------------

### setPatternProperties

Source: https://vue.formilyjs.org/api/shared/schema.html

Updates regex-based property descriptions using an override approach.

```APIDOC
## setPatternProperties(properties: SchemaProperties)

### Description
Performs an override update of the regex-based property descriptions.

### Returns
- **Schema** - The current Schema object.
```

--------------------------------

### addPatternProperty

Source: https://vue.formilyjs.org/api/shared/schema.html

Adds a regex-based property description.

```APIDOC
## addPatternProperty(regexp: string, schema: ISchema)

### Description
Adds a regex-based property description to the schema.

### Returns
- **Schema** - The updated Schema object.
```

--------------------------------

### Implement FormConsumer with FormProvider

Source: https://vue.formilyjs.org/api/components/form-consumer.html

Demonstrates using FormConsumer within a FormProvider to display real-time input values from the form model.

```vue
<template>
  <FormProvider :form="form">
    <Field name="input" :component="[Input]" />
    <FormConsumer>
      <template #default="{ form }">
        {{ form.values.input }}
      </template>
    </FormConsumer>
  </FormProvider>
</template>

<script>
import { Input } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, Field, FormConsumer } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

export default {
  components: { FormProvider, Field, FormConsumer },
  data() {
    return {
      Input,
      form: createForm(),
    }
  },
}
</script>
```

--------------------------------

### FormContext

Source: https://vue.formilyjs.org/api/shared/injections.html

Provides access to the current Form instance.

```APIDOC
## FormContext

### Description
Provides access to the current Form instance via Vue's inject mechanism.

### Signature
```typescript
import { Form } from '@formily/core'
const FormContext = inject<Form>(FormSymbol)
```
```

--------------------------------

### useForm()

Source: https://vue.formilyjs.org/api/hooks/use-form.html

Retrieves the current Form instance. This is typically used within custom components to react to form state changes or access form data.

```APIDOC
## useForm()

### Description
Retrieves the current Form instance within a component. This is useful for accessing form values, errors, or other form-related state within custom components.

### Signature
`interface useForm { (): Form }`

### Usage
```javascript
import { useForm } from '@formily/vue';

// Inside a setup function
const formRef = useForm();
const form = formRef.value;
```
```

--------------------------------

### SchemaOptionsContext

Source: https://vue.formilyjs.org/api/shared/injections.html

Provides access to global Schema options passed from createSchemaField.

```APIDOC
## SchemaOptionsContext

### Description
Provides access to global Schema options passed from createSchemaField.

### Signature
```typescript
const SchemaOptionsContext = inject<ISchemaFieldFactoryOptions>(SchemaOptionsSymbol)
```
```

--------------------------------

### compile

Source: https://vue.formilyjs.org/api/shared/schema.html

Compiles expression fragments within the schema.

```APIDOC
## compile(scope: any)

### Description
Recursively compiles expression fragments (strings starting with {{ and ending with }}) within the schema using the provided scope.

### Returns
- **Schema** - The compiled Schema object.
```

--------------------------------

### setProperties

Source: https://vue.formilyjs.org/api/shared/schema.html

Updates property descriptions using an override approach.

```APIDOC
## setProperties(properties: SchemaProperties)

### Description
Performs an override update of the property descriptions.

### Returns
- **Schema** - The current Schema object.
```

--------------------------------

### Schema Constructor

Source: https://vue.formilyjs.org/api/shared/schema.html

Creates a new Schema instance from a JSON schema object to build a Schema Tree.

```APIDOC
## constructor(json: ISchema, parent?: ISchema)

### Description
Creates a new Schema instance based on a JSON schema object. This initializes a node within a Schema Tree, ensuring all schema nodes contain the necessary methods for processing.

### Parameters
- **json** (ISchema) - Required - The JSON schema definition object.
- **parent** (ISchema) - Optional - The parent schema node.
```

--------------------------------

### registerVoidComponents

Source: https://vue.formilyjs.org/api/shared/schema.html

Marks components as virtual components for compatibility.

```APIDOC
## registerVoidComponents(components)

### Description
Identifies specific components as virtual components to maintain compatibility with Formily 1.x.

### Signature
`registerVoidComponents(components: string[]): void`
```

--------------------------------

### connect<T>(target: T, ...args: IComponentMapper<T>[]): Vue.Component

Source: https://vue.formilyjs.org/api/shared/connect.html

The connect function takes a target Vue component and a series of component mappers to return a new component integrated with Formily.

```APIDOC
## connect(target, ...args)

### Description
Connects a third-party Vue component to Formily by applying component mappers. This is typically used to map component props to Formily field states.

### Signature
`connect<T extends Vue.Component>(target: T, ...args: IComponentMapper<T>[]): Vue.Component`

### Parameters
- **target** (Vue.Component) - Required - The component to be integrated.
- **...args** (IComponentMapper<T>[]) - Optional - A list of component mapper functions (e.g., mapProps, mapReadPretty) to transform component properties.

### Usage Example
```javascript
import { connect, mapProps } from '@formily/vue';
import { Form } from 'ant-design-vue';

const FormItem = connect(
  Form.Item,
  mapProps(
    {
      title: 'label',
      description: 'extra',
      required: true,
      validateStatus: true,
    },
    (props, field) => {
      return {
        ...props,
        help: field.selfErrors?.length ? field.selfErrors : undefined,
      }
    }
  )
);
```
```

--------------------------------

### compile

Source: https://vue.formilyjs.org/api/shared/schema.html

Deeply traverses an object to resolve expression fragments.

```APIDOC
## compile(target, scope)

### Description
Performs a deep traversal of an object to resolve expression fragments defined as strings starting with '{{' and ending with '}}'.

### Signature
`compile(target: any, scope: any): any`
```

--------------------------------

### useField()

Source: https://vue.formilyjs.org/api/hooks/use-field

A hook that returns a reactive reference to the current field model.

```APIDOC
## useField()

### Description
Retrieves the current field model (GeneralField) within a Field component's subtree. This allows custom components to read field properties and manipulate field state.

### Signature
`interface useField { (): Ref<Field> }`

### Usage Note
To ensure the custom component reacts to changes in the field model, the component must be wrapped with the `observer` function from `@formily/reactive-vue`.
```

--------------------------------

### enablePolyfills Usage

Source: https://vue.formilyjs.org/api/shared/schema.html

Enables protocol compatibility polyfills for specified versions.

```typescript
interface enablePolyfills {
  (versions: string[]): void
}
```

```typescript
import { Schema } from '@formily/vue'

Schema.enablePolyfills(['1.0'])
```

--------------------------------

### mapProps(mapper)

Source: https://vue.formilyjs.org/api/shared/map-props

Creates a component adapter that maps Field state to component properties.

```APIDOC
## mapProps

### Description
An adapter function that maps Field properties to component properties. It is primarily used with the connect function to bridge Formily field states with Vue component props.

### Signature
```typescript
type IStateMapper<Props> = 
  | { [key in keyof Field]?: keyof Props | boolean }
  | ((props: Props, field: GeneralField) => Props)

function mapProps<T extends Vue.Component>(...args: IStateMapper<VueComponentProps<T>>[]): Vue.Component
```

### Parameters
- **args** (IStateMapper[]) - A list of mappers. Can be an object where keys are Field properties and values are component properties (or true for identical names), or a function that receives current props and the field instance to return transformed props.
```

--------------------------------

### mapPatternProperties Method

Source: https://vue.formilyjs.org/api/shared/schema.html

Iterates and maps the current schema's patternProperties, ordered by x-index.

```typescript
interface mapPatternProperties<T> {
  (mapper: (property: Schema, key: string | number) => T): T[]
}
```

--------------------------------

### Run Statement Linkage

Source: https://vue.formilyjs.org/api/shared/schema.html

Executes imperative code using the $form API within the reaction.

```json
{
  "type": "object",
  "properties": {
    "source": {
      "type": "string",
      "x-component": "Input",
      "x-reactions": {
        "fulfill": {
          "run": "$form.setFieldState('target',state=>{state.visible = $self.value === '123'})"
        }
      }
    },
    "target": {
      "type": "string",
      "x-component": "Input"
    }
  }
}
```

--------------------------------

### SchemaMarkupContext

Source: https://vue.formilyjs.org/api/shared/injections.html

Used for collecting JSX Markup Schema tags and converting them to JSON Schema.

```APIDOC
## SchemaMarkupContext

### Description
Used to collect JSX Markup Schema tags and convert them into standard JSON Schema.

### Signature
```typescript
SchemaMarkupContext = inject<Schema>(SchemaMarkupSymbol)
```
```

--------------------------------

### addProperty

Source: https://vue.formilyjs.org/api/shared/schema.html

Adds a property description to the schema.

```APIDOC
## addProperty(key: string | number, schema: ISchema)

### Description
Adds a property description to the current Schema object.

### Returns
- **Schema** - The updated Schema object.
```

--------------------------------

### registerPolyfills

Source: https://vue.formilyjs.org/api/shared/schema.html

Registers a compatibility polyfill for a specific version.

```APIDOC
## registerPolyfills(version, patch)

### Description
Registers a patch function to handle protocol compatibility for a specific version.

### Signature
`registerPolyfills(version: string, patch: SchemaPatch): void`
```

--------------------------------

### FieldContext

Source: https://vue.formilyjs.org/api/shared/injections.html

Provides access to the current Field instance.

```APIDOC
## FieldContext

### Description
Provides access to the current field instance via Vue's inject mechanism.

### Signature
```typescript
import { GeneralField } from '@formily/core'
const FieldContext = inject<GeneralField>(FieldSymbol)
```
```

--------------------------------

### setItems

Source: https://vue.formilyjs.org/api/shared/schema.html

Updates the array items description.

```APIDOC
## setItems(items: SchemaItems)

### Description
Performs an override update of the array items description.

### Returns
- **SchemaItems** - The updated SchemaItems object.
```

--------------------------------

### setPatternProperties Method

Source: https://vue.formilyjs.org/api/shared/schema.html

Performs an overwrite update of regular expression property descriptions.

```typescript
interface setPatternProperties {
  (properties: SchemaProperties): Schema //返回当前Schema对象
}
```

--------------------------------

### setProperties Method

Source: https://vue.formilyjs.org/api/shared/schema.html

Performs an overwrite update of property descriptions.

```typescript
interface setProperties {
  (properties: SchemaProperties): Schema //返回当前Schema对象
}
```

--------------------------------

### mapProperties Method

Source: https://vue.formilyjs.org/api/shared/schema.html

Iterates and maps the current schema's properties, ordered by x-index.

```typescript
interface mapProperties<T> {
  (mapper: (property: Schema, key: string | number) => T): T[]
}
```

--------------------------------

### Access Schema Options via SchemaOptionsContext

Source: https://vue.formilyjs.org/api/shared/injections.html

Use this to retrieve global schema parameters passed from createSchemaField.

```typescript
const SchemaOptionsContext =
  inject<ISchemaFieldFactoryOptions>(SchemaOptionsSymbol)
```

--------------------------------

### addProperty Method

Source: https://vue.formilyjs.org/api/shared/schema.html

Adds a property description to the schema.

```typescript
interface addProperty {
  (key: string | number, schema: ISchema): Schema //返回添加后的Schema对象
}
```

--------------------------------

### useForm Interface Definition

Source: https://vue.formilyjs.org/api/hooks/use-form.html

The signature of the useForm hook which returns a Form instance.

```typescript
interface useForm {
  (): Form
}
```

--------------------------------

### shallowCompile

Source: https://vue.formilyjs.org/api/shared/schema.html

Shallowly traverses an object to resolve expression fragments.

```APIDOC
## shallowCompile(target, scope)

### Description
Performs a shallow traversal of an object to resolve expression fragments defined as strings starting with '{{' and ending with '}}'.

### Signature
`shallowCompile(target: any, scope: any): any`
```

--------------------------------

### setAdditionalItems

Source: https://vue.formilyjs.org/api/shared/schema.html

Updates the array additional items description.

```APIDOC
## setAdditionalItems(items: ISchema)

### Description
Performs an override update of the array additional items description.

### Returns
- **Schema** - The updated Schema object.
```

--------------------------------

### registerPatches

Source: https://vue.formilyjs.org/api/shared/schema.html

Registers schema patches for protocol compatibility.

```APIDOC
## registerPatches(...args)

### Description
Registers patches to ensure compatibility across different versions of the Schema protocol.

### Signature
`registerPatches(...args: SchemaPatch[]): void`
```

--------------------------------

### FormProvider Component Signature

Source: https://vue.formilyjs.org/api/components/form-provider.html

Defines the component structure and the required form instance created via createForm.

```typescript
type FormProvider = Vue.Component<
  any,
  any,
  any,
  {
    form: Form //通过createForm创建的form实例
  }
>
```

--------------------------------

### addPatternProperty Method

Source: https://vue.formilyjs.org/api/shared/schema.html

Adds a regular expression property description.

```typescript
interface addPatternProperty {
  (regexp: string, schema: ISchema): Schema //返回添加后的Schema对象
}
```

--------------------------------

### mapPatternProperties

Source: https://vue.formilyjs.org/api/shared/schema.html

Maps over the pattern properties of the schema.

```APIDOC
## mapPatternProperties<T>(mapper: (property: Schema, key: string | number) => T)

### Description
Traverses and maps the current Schema's patternProperties, ordered by x-index.

### Returns
- **T[]** - An array of mapped values.
```

--------------------------------

### SchemaExpressionScopeContext

Source: https://vue.formilyjs.org/api/shared/injections.html

Provides access to the Schema expression scope.

```APIDOC
## SchemaExpressionScopeContext

### Description
Provides access to the Schema expression scope context.

### Signature
```typescript
const SchemaExpressionScopeContext = inject<any>(SchemaExpressionScopeSymbol)
```
```

--------------------------------

### SchemaContext

Source: https://vue.formilyjs.org/api/shared/injections.html

Provides access to the current field's Schema information.

```APIDOC
## SchemaContext

### Description
Provides access to the current field's Schema information.

### Signature
```typescript
const SchemaContext = inject<Schema>(SchemaSymbol)
```
```

--------------------------------

### silent

Source: https://vue.formilyjs.org/api/shared/schema.html

Configures silent compilation mode.

```APIDOC
## silent(value)

### Description
Sets whether compilation should be silent. If enabled, expression errors will not trigger warnings.

### Signature
`silent(value?: boolean): void`
```

--------------------------------

### createSchemaField

Source: https://vue.formilyjs.org/api/components/schema-field

Factory function to create a SchemaField component and its associated field types.

```APIDOC
## createSchemaField(props: ISchemaFieldFactoryProps)

### Description
Creates a set of SchemaField components for dynamic form rendering.

### Parameters
- **props** (ISchemaFieldFactoryProps) - Required
  - **components** (Object) - Optional - A map of component names to Vue components.
  - **scope** (any) - Optional - Global scope for protocol expression variable injection.

### Returns
- **ComposeSchemaField** - An object containing SchemaField, SchemaMarkupField, SchemaStringField, SchemaObjectField, SchemaArrayField, SchemaBooleanField, SchemaDateField, SchemaDateTimeField, SchemaVoidField, and SchemaNumberField.
```

--------------------------------

### compile Method

Source: https://vue.formilyjs.org/api/shared/schema.html

Recursively compiles expression fragments within the schema using a provided scope.

```typescript
interface compile {
  (scope: any): Schema
}
```

--------------------------------

### Accessing Schema in a Custom Component

Source: https://vue.formilyjs.org/api/hooks/use-field-schema.html

Demonstrates using useFieldSchema inside a custom component to display the field's schema definition.

```vue
<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaObjectField
        name="custom"
        x-component="Custom"
        :x-component-props="{
          schema: {
            type: 'object',
            properties: {
              input: {
                type: 'string',
                'x-component': 'Custom',
              },
            },
          },
        }"
      />
    </SchemaField>
  </FormProvider>
</template>

<script>
import { defineComponent, h } from '@vue/composition-api'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField, useFieldSchema } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

const Custom = defineComponent({
  setup() {
    const schemaRef = useFieldSchema()
    return () => {
      const schema = schemaRef.value
      return h(
        'div',
        {
          style: { whiteSpace: 'pre' },
        },
        [JSON.stringify(schema.toJSON(), null, 4)]
      )
    }
  },
})

const { SchemaField, SchemaObjectField } = createSchemaField({
  components: {
    Custom,
  },
})

export default {
  components: { FormProvider, SchemaField, SchemaObjectField },
  data() {
    const form = createForm({ validateFirst: true })
    return {
      form,
    }
  },
}
</script>
```

--------------------------------

### registerVoidComponents Usage

Source: https://vue.formilyjs.org/api/shared/schema.html

Registers components as virtual components for Formily 1.x compatibility. Requires enablePolyfills(['1.0']).

```typescript
interface registerVoidComponents {
  (components: string[]): void
}
```

```typescript
import { Schema } from '@formily/react'

Schema.registerVoidComponents(['card', 'tab', 'step'])
```

--------------------------------

### registerCompiler

Source: https://vue.formilyjs.org/api/shared/schema.html

Registers a custom expression compiler.

```APIDOC
## registerCompiler(compiler)

### Description
Registers a custom function to handle expression compilation.

### Signature
`registerCompiler(compiler: (expression: string, scope: any) => any): void`
```

--------------------------------

### Lifecycle Hook Linkage

Source: https://vue.formilyjs.org/api/shared/schema.html

Triggers reactions based on specific field lifecycle events.

```json
{
  "type": "object",
  "properties": {
    "source": {
      "type": "string",
      "x-component": "Input",
      "x-reactions": {
        "target": "target",
        "effects": ["onFieldInputValueChange"],
        "fulfill": {
          "state": {
            "visible": "{{$self.value === '123'}}" //任意层次属性都支持表达式
          }
        }
      }
    },
    "target": {
      "type": "string",
      "x-component": "Input"
    }
  }
}
```

--------------------------------

### Access Schema Markup via SchemaMarkupContext

Source: https://vue.formilyjs.org/api/shared/injections.html

Used for collecting JSX Markup Schema tags to convert them into standard JSON Schema.

```typescript
SchemaMarkupContext = inject<Schema>(SchemaMarkupSymbol)
```

--------------------------------

### fromJSON

Source: https://vue.formilyjs.org/api/shared/schema.html

Converts JSON to a Schema object.

```APIDOC
## fromJSON(json: ISchema)

### Description
Converts plain JSON data into a Schema object.

### Returns
- **Schema** - The resulting Schema object.
```

--------------------------------

### useFieldSchema Type Signature

Source: https://vue.formilyjs.org/api/hooks/use-field-schema.html

The hook returns a Ref containing the Schema object.

```typescript
interface useFieldSchema {
  (): Ref<Schema>
}
```

--------------------------------

### mapProperties

Source: https://vue.formilyjs.org/api/shared/schema.html

Maps over the properties of the schema.

```APIDOC
## mapProperties<T>(mapper: (property: Schema, key: string | number) => T)

### Description
Traverses and maps the current Schema's properties, ordered by x-index.

### Returns
- **T[]** - An array of mapped values.
```

--------------------------------

### useFieldSchema()

Source: https://vue.formilyjs.org/api/hooks/use-field-schema.html

Retrieves the current field's Schema object as a Vue Ref.

```APIDOC
## useFieldSchema

### Description
Returns a Ref containing the Schema object for the current field. This hook must be invoked within the context of a SchemaField or RecursionField.

### Signature
`function useFieldSchema(): Ref<Schema>`

### Returns
- **Ref<Schema>** - A reactive reference to the current field's schema definition.
```

--------------------------------

### SchemaField Component

Source: https://vue.formilyjs.org/api/components/schema-field

The primary component used to wrap and render schema-based fields.

```APIDOC
## <SchemaField />

### Description
Component used to parse JSON-Schema and render dynamic form fields.

### Props
- **schema** (ISchema) - Optional - The field schema definition.
- **scope** (any) - Optional - Protocol expression scope.
- **name** (string) - Optional - The field name.
```

--------------------------------

### SchemaField Type Definitions

Source: https://vue.formilyjs.org/api/components/schema-field

Type signatures for the SchemaField factory and its associated component properties.

```typescript
type ComposeSchemaField = {
  SchemaField: Vue.Component<any, any, any, ISchemaFieldProps>
  SchemaMarkupField: Vue.Component<any, any, any, ISchema>
  SchemaStringField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaObjectField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaArrayField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaBooleanField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaDateField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaDateTimeField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaVoidField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaNumberField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
}

//工厂函数参数属性
interface ISchemaFieldFactoryProps {
  components?: {
    [key: string]: Vue.Component //组件列表
  }
  scope?: any //全局作用域，用于实现协议表达式变量注入
}

//SchemaField属性
interface ISchemaFieldProps extends IFieldFactoryProps {
  schema?: ISchema //字段schema
  scope?: any //协议表达式作用域
  name?: string //字段名称
}

//工厂函数
interface createSchemaField {
  (props: ISchemaFieldFactoryProps): ComposeSchemaField
}
```

--------------------------------

### toFieldProps

Source: https://vue.formilyjs.org/api/shared/schema.html

Converts the Schema to Formily field properties.

```APIDOC
## toFieldProps()

### Description
Converts the current Schema object into Formily field model properties.

### Returns
- **IFieldFactoryProps** - The field properties object.
```

--------------------------------

### toFieldProps Method

Source: https://vue.formilyjs.org/api/shared/schema.html

Converts the current Schema object into Formily field model properties.

```typescript
import { IFieldFactoryProps } from '@formily/core'

interface toFieldProps {
  (): IFieldFactoryProps
}
```

--------------------------------

### fromJSON Method

Source: https://vue.formilyjs.org/api/shared/schema.html

Converts plain JSON data into a Schema object.

```typescript
interface fromJSON {
  (json: ISchema): Schema
}
```

--------------------------------

### Dynamic Object Property Management

Source: https://vue.formilyjs.org/api/components/object-field.html

Demonstrates using ObjectField to dynamically add and remove properties from an object field using scoped slots.

```vue
<template>
  <FormProvider :form="form">
    <ObjectField name="object">
      <template #default="{ field }">
        <div
          v-for="key in Object.keys(field.value || {})"
          :key="key"
          :style="{ marginBottom: '10px' }"
        >
          <Space>
            <Field :name="key" :component="[Input, { placeholder: key }]" />
            <Button @click="field.removeProperty(key)"> Remove </Button>
          </Space>
        </div>
        <Space>
          <Field
            name="propertyName"
            basePath=""
            required
            :component="[Input, { placeholder: 'Property Name' }]"
          />
          <Button @click="addPropertyToField(field)"> Add </Button>
        </Space>
      </template>
    </ObjectField>
  </FormProvider>
</template>

<script>
import { Input, Space, Button } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, ObjectField, Field } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

export default {
  components: { FormProvider, ObjectField, Field, Space, Button },
  data() {
    return {
      Input,
      form: createForm(),
    }
  },
  methods: {
    addPropertyToField(field) {
      const name = this.form.values.propertyName
      if (name && !this.form.existValuesIn(`object.${name}`)) {
        field.addProperty(name, '')
        this.form.deleteValuesIn('propertyName')
      }
    },
  },
}
</script>
```

--------------------------------

### Implement RecursionField for dynamic list management

Source: https://vue.formilyjs.org/api/components/recursion-field-with-component.html

Uses observer and RecursionField to render dynamic array items with add/remove functionality.

```vue
<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaArrayField name="custom" x-component="ArrayItems">
        <SchemaObjectField>
          <SchemaStringField name="input" x-component="Input" />
        </SchemaObjectField>
      </SchemaArrayField>
    </SchemaField>
  </FormProvider>
</template>

<script>
import { defineComponent, h } from '@vue/composition-api'
// or "import { defineComponent, h } from 'vue'" if using vue3
import { Input, Button, Space } from 'ant-design-vue'
import { createForm } from '@formily/core'
import {
  FormProvider,
  createSchemaField,
  RecursionField,
  useField,
  useFieldSchema,
} from '@formily/vue'
import { observer } from '@formily/reactive-vue'
import 'ant-design-vue/dist/antd.css'

const ArrayItems = observer(
  defineComponent({
    setup() {
      const fieldRef = useField()
      const schemaRef = useFieldSchema()

      return () => {
        const field = fieldRef.value
        const schema = schemaRef.value
        const items = field.value?.map((item, index) => {
          return h('div', { key: item.id, style: { marginBottom: '10px' } }, [
            h(Space, [
              // params of render function is different in vue3
              h(RecursionField, {
                props: { schema: schema.items, name: index },
              }),
              h(Button, { on: { click: () => field.remove(index) } }, [
                'Remove',
              ]),
            ]),
          ])
        })
        const button = h(
          Button,
          { on: { click: () => field.push({ id: Date.now() }) } },
          ['Add']
        )
        return h('div', [items, button])
      }
    },
  })
)

const { SchemaField, SchemaStringField, SchemaArrayField, SchemaObjectField } =
  createSchemaField({
    components: {
      ArrayItems,
      Input,
    },
  })

export default {
  components: {
    FormProvider,
    SchemaField,
    SchemaStringField,
    SchemaArrayField,
    SchemaObjectField,
  },
  data() {
    return {
      form: createForm(),
    }
  },
}
</script>
```

--------------------------------

### reduceProperties

Source: https://vue.formilyjs.org/api/shared/schema.html

Reduces the properties of the schema.

```APIDOC
## reduceProperties<T>(reducer: (value: T, property: Schema, key: string | number) => T, initialValue?: T)

### Description
Reduces the current Schema's properties, ordered by x-index.

### Returns
- **T** - The reduced value.
```

--------------------------------

### registerTypeDefaultComponents

Source: https://vue.formilyjs.org/api/shared/schema.html

Maps schema types to default component names.

```APIDOC
## registerTypeDefaultComponents(maps)

### Description
Assigns default component types to specific schema data types.

### Signature
`registerTypeDefaultComponents(maps: Record<string, string>): void`
```

--------------------------------

### Render form with JSON Schema

Source: https://vue.formilyjs.org/api/components/schema-field-with-schema.html

Uses SchemaField to define form fields via a JSON-Schema object. Requires FormProvider and component registration via createSchemaField.

```vue
<template>
  <FormProvider :form="form">
    <SchemaField
      :schema="{
        type: 'object',
        properties: {
          input: {
            type: 'string',
            'x-component': 'Input',
          },
        },
      }"
    >
    </SchemaField>
  </FormProvider>
</template>

<script>
import { Input } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

const { SchemaField } = createSchemaField({
  components: {
    Input,
  },
})

export default {
  components: { FormProvider, SchemaField },
  data() {
    return {
      form: createForm(),
    }
  },
}
</script>
```

--------------------------------

### registerPatches Interface

Source: https://vue.formilyjs.org/api/shared/schema.html

Defines the signature for registering schema patches for version compatibility.

```typescript
type SchemaPatch = (schema: ISchema) => ISchema

interface registerPatches {
  (...args: SchemaPatch[]): void
}
```

--------------------------------

### setItems Method

Source: https://vue.formilyjs.org/api/shared/schema.html

Performs an overwrite update of array item descriptions.

```typescript
interface setItems {
  (items: SchemaItems): SchemaItems //返回更新后的SchemaItems对象
}
```

--------------------------------

### Standard Active Linkage

Source: https://vue.formilyjs.org/api/shared/schema.html

Uses the fulfill and otherwise properties to toggle field visibility based on a condition.

```json
{
  "type": "object",
  "properties": {
    "source": {
      "type": "string",
      "x-component": "Input",
      "x-reactions": {
        "target": "target",
        "when": "{{$self.value === '123'}}",
        "fulfill": {
          "state": {
            "visible": false
          }
        },
        "otherwise": {
          "state": {
            "visible": true
          }
        }
      }
    },
    "target": {
      "type": "string",
      "x-component": "Input"
    }
  }
}
```
Tokens:
Raw