Event Configuration

The component form event configuration feature allows users to listen to and handle component events, enabling more flexible and dynamic component behavior.

1. Overview

Custom form component event triggering allows developers to bind custom event logic to form components (such as input boxes, dropdowns, buttons, etc.). When users interact with components (clicking, typing, selecting, etc.), predefined operations or callback functions are triggered.

2. Use Cases

1. Dynamic Form Validation

• Scenario: When users enter a phone number, validate the format in real-time and display errors.
• Implementation: Bind an onChange event to the input box, trigger regular validation logic, and dynamically update error prompts.

2. Cascading Selector

• Scenario: After selecting a province, automatically load the corresponding city list.
• Implementation: Bind an onChange event to the province dropdown, trigger an API request to fetch city data, and update the city dropdown options.

3. Real-time Data Synchronization

• Scenario: When users modify form data, save to local storage or synchronize to the server in real-time.
• Implementation: Bind onBlur or onChange events to the form, trigger data saving logic.

3. Configuration

Event configuration entry:

Event configuration dialog:

1. Events supported by the current component, click to add a new event
2. Bind events with custom names

1. Currently editing event
2. Delete added events
3. Event function content editing area
4. inject parameter: An injection parameter that provides access to the form API, original parameters, and other parameters
5. Save button: Click to save changes after modifying function content

1. Select custom event functions from global data sources (supports extension)
2. Management button: Opens the global event management interface
3. Save button: Click to save changes after modifying the data source