Extending Custom Properties

FormCreate provides powerful extension mechanisms that let developers implement complex business logic and dynamic form generation through custom properties. This guide details how to define and use custom properties, and how to apply these features in actual business scenarios.

Basic Concepts of Custom Properties

Through custom property extensions, you can define specific behaviors or logic for form components, such as dynamic data loading, validation rules, or other business logic processing. Custom properties can be configured in form generation rules and trigger corresponding callbacks during the component's lifecycle.

Built-in Custom Properties

• Required Validation: required
• Remote Data Loading: fetch
• Static Data Loading: loadData
• Component Custom Validation: componentValidate

Data Structure

type Effect = {
    // Custom property name
    name: string;
    // Rule initialization
    init({value}, rule, fapi);
    // Rule starts loading
    load({value}, rule, fapi);
    // Rule initialization complete
    created({value}, rule, fapi);
    // Rule loading complete
    loaded({value}, rule, fapi);
    // Property value changes
    watch({value}, rule, fapi);
    // Component value changes
    value({value}, rule, fapi);
    // control takes effect
    control({value}, rule, fapi);
    // Rule removed
    deleted({value}, rule, fapi);
    // Rule generated
    mounted({value}, rule, fapi);
}

Defining Custom Property Extensions

To create a custom property extension, you need to define a property object and register it with FormCreate. The following is a complete example:

1. Define Custom Property

const optionEffect = {
    // Custom property name
    name: 'option',
    // Rule starts loading
    load({value}, rule, fapi) {
        setTimeout(() => {
            rule.options.push(...[
                {label: value, value: value}, {label: value + value, value: value + value},
            ])
        }, 300)
    },
    // Property value changes
    watch({value}, rule, fapi) {
        setTimeout(() => {
            rule.options.push(...[
                {label: value, value: value}, {label: value + value, value: value + value},
            ])
        }, 300)
    },
}

2. Register Custom Property After registering the custom property extension, you can use it in rules:

formCreate.register(optionEffect)

3. Using Custom Properties in Rules

In generation rules, you can use custom properties through the effect property:

const rule = {
    type: 'input',
    field: 'username',
    title: 'Username',
    effect: {
        option: 'someValue'  // Use custom property
    }
}

Or use the shorthand form:

const rule = {
    type: 'input',
    field: 'username',
    title: 'Username',
    $option: 'someValue'  // Use shorthand form of custom property
}

Examples

Loading Option Data

Dynamically add option data during component initialization to achieve asynchronous loading and dynamic updating of form options.

Computing Through Component Values

Through custom registration logic, dynamically modify component suffix (suffix) based on component values to achieve dynamic updates of form component display content.

Listening to Custom Property Changes

Listen to custom property changes through watch, respond to component property changes in real-time and dynamically update other properties (such as prefix), achieving linkage and dynamic interaction effects between form components.

Through custom property extensions, FormCreate provides flexible and powerful form dynamic generation and control capabilities. Developers can define various custom properties according to specific business needs to implement complex form logic, dynamic data loading, and linkage effects.