Component Events

Listen to events emitted by components and handle them through the on and emit configuration items.

Listening to Component Events

Using the on configuration item, directly define event listeners in rules and handle events emitted by components. The following example shows how to listen to component events through on.

Listening to Component Events Through Form Tags

Using the emit configuration item, listen to events triggered by components through form tags. The following example shows how to use emit to listen to events.

Note

When using emit to listen to events, uppercase letters in event names will be automatically converted to -lowercase format. For example, the change event of the inputField component will be converted to input-field-change.

Modifying Event Prefix

Set emitPrefix to add a custom prefix to event names for better descriptiveness. The generated format is ${emitPrefix}-${eventName}. The example below demonstrates the configuration method.

Listening to Events Through api.on Method

Use the api.on method to dynamically listen to events emitted by form components in code, providing a more flexible event handling approach. The following example shows how to use the api.on method to listen to events.

Getting API in Events

This guide explains how to get the API object for operating forms in event handling and how to use the event injection feature to pass additional data.

Note

The event injection feature can inject parameters such as api, rule, etc. into events.

After enabling event injection through the inject configuration item, injected parameters will be added at the first position of the callback event parameters.

Data Structure

The parameter structure used by the event injection feature is as follows:

type InjectArg = {
    api: APi,//api
    rule: Rule[],//Generation rules
    self: Rule,//Current generation rule
    option: Object,//Global configuration
    inject: Any,//Custom injected parameters
    args: any[],//Original callback parameters
}

Event Injection

Configure inject to inject the form API object and other custom data into event handler functions, making it convenient to access and manipulate form data in events.

Globally Enabling Event Injection

Globally enable event injection by setting the form global configuration item injectEvent: true, so all events and native events automatically inject event parameters. This configuration is suitable when you need to uniformly handle form API and other data in all events.