Computing Component Fields

Through the computed field, dynamically calculate specified fields of components. When dependent values change, results are automatically recalculated and updated.

Data Structure

type Computed = {
    [key: string]: (formData: Object, api: Api, rule: Rule) => any;
};

Note

To modify property values in objects, calculate nested properties through the rule.variableName.attributeName format.

Inside the calculation function, avoid referencing the component's own property values to prevent recursive infinite loops.

Examples

Computing Component Configuration Items (props)

Based on the radio button's selection state (disabled or inputable), calculate and set the input's disabled property in real-time to achieve conditional control of component properties.

Computing Component Display State in Sub-forms

Based on the main form radio button's value (show or hide), calculate and set the sub-form input's hidden property in real-time to achieve cross-level conditional display control.

Computing Component Values

Based on the radio button's selected value, calculate the input's display content in real-time (display the corresponding option's label) and set the readonly property to achieve data linkage and state control.

Computing Custom Property Values

Based on the radio button's selection value (required or not required), set the input box's $required property in real-time to achieve dynamic control of form validation rules.