Component Linkage

In form development, you often need to implement linkage behavior between components, such as dynamically showing or hiding other components when a certain input's value meets specific conditions. FormCreate provides powerful component linkage functionality, achieving component loading, display, disabling, and required state control through the control configuration item.

This guide details component linkage configuration items and their usage, helping you flexibly apply these features in actual business scenarios through multiple examples.

Data Structure

type Control =  Array<{
  // Control through built-in conditions, choose one with `handle`
  value?: any;
  // Built-in conditions, can be combined with `value`
  condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty';
  // Custom control condition
  handle?: (val: any, api: Api) => boolean;
  // Control display, disabled, required state of specified rules
  method?: 'display' | 'disabled' | 'hidden' | 'required';
  // Fields to control
  rule: string[];
} | {
  // Control through built-in conditions, choose one with `handle`
  value?: any;
  // Built-in conditions, can be combined with `value`
  condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty';
  // Custom control condition
  handle?: (val: any, api: Api) => boolean;
  // Rules to control
  rule: Rule[];
  // When condition is met, append `rule` after specified field
  append?: string;
  // When condition is met, prepend `rule` before specified field
  prepend?: string;
  // When condition is met, add `rule` as child of specified field. If `append` and `prepend` are not configured, defaults to current rule
  child?: boolean;
}>

Note

handle has higher priority than value

It is recommended to use the first component linkage form: define all associated components in rules in advance.

method Options

Key Name	Configuration Item	Description
if/hidden	Conditional Rendering	Control component show/hide state
required	Required Validation	Set whether field is required
disabled/enabled	Disabled State	Control whether component is interactive
display	Display State	Control component display state (will render DOM)

Note

The current version has a semantic reversal issue: hidden=true shows the component, disabled=true enables the function. For this reason, semantically clear if (true shows/false hides) and enabled (true enables/false disables) parameters have been added.

condition Options

Key Name	Operator	Description	Value Type	Example
==	Equal	Component value exactly equals value	Any	value: 10
!=	Not Equal	Component value does not equal value	Any	value: "error"
<>	Not Equal	Component value does not equal value (same as !=)	Any	value: false
>	Greater Than	Component value greater than value	Number	value: 100
>=	Greater Than or Equal	Component value greater than or equal to value	Number	value: 18
<	Less Than	Component value less than value	Number	value: 0
<=	Less Than or Equal	Component value less than or equal to value	Number	value: 100
in	Contains	Component value exists in value array	Array	value: [1,2,3]
notIn	Not Contains	Component value does not exist in value array	Array	value: ["a","b"]
on	Contains Value	value exists in component value (array)	String	Number
notOn	Not Contains Value	value does not exist in component value (array)	String	Number
between	Within Range	Component value between value[0] and value[1]	Array[2]	value: [10,20]
notBetween	Outside Range	Component value not between value[0] and value[1]	Array[2]	value: [0,100]
empty	Empty	Pass validation when component value is empty	-	value: true
notEmpty	Not Empty	Pass validation when component value is not empty	-	value: true
pattern	Regex	Validate component value with regular expression	String	value:'^1\d{10}$' (no need for "/" before and after)

Linkage Examples

Appending New Rules

Implement conditional loading through rating component control rules: when user rating is below 3 stars, automatically display a negative review reason input, requiring users to fill in specific reasons.

Appending New Rules to Specified Position

Implement dynamic forms through input control rules: when input3 has a value, automatically insert input4 after input1, achieving dynamically expanding form fields based on user input.

Appending New Rules to Slots

Implement dynamic slots through input control rules: when input value is "child", automatically add a button at the input's append slot position, achieving dynamically displaying slot content based on input content.

Controlling Required State of Existing Rules

Implement dynamic required validation through input control rules: when input1 value is "required", automatically set input2 field to required state, achieving dynamically adjusting form validation rules based on conditions.

Configuring Multiple Component Linkage

An input simultaneously configures multiple control rules: when the input has a value, both add a button to the input's suffix slot and dynamically insert a rating component, achieving complex form interaction effects triggered by multiple conditions simultaneously.

Controlling Display State of Existing Rules

Control the display state of field/name components in the current form

const control = {
    value: 1,
    rule: ['field1', 'name2']
}

Conditionally Controlling Display State of Existing Rules

Control the display state of field/name components in the current form through condition >= 1

const control = {
    value: 1,
    condition: '>=',
    rule: ['field1', 'name2']
}

Controlling Disabled State of Existing Rules

Control whether field/name components in the current form are disabled

const control = {
    value: 1,
    method: 'disabled',
    rule: ['field1', 'name2']
}

Loading New Rules Through Conditions

When component value does not equal the component value, load new rules from rule to the end of the form

const control = {
    value: 1,
    condition: '!=',
    rule:[{type:'input', field:'field',title:'field'}]
}

Modifying Other Component Slots

After the condition is met, insert new rules into the children of the goods_name component

const control = {
    value:1,
    prepend:'goods_name',
    child: true,
    rule:[{type:'input', field:'field',title:'field'}]
}

Through the control configuration item, easily implement complex linkage logic between various components in the form, greatly improving the form's dynamism and user experience. Whether it's simple show/hide or complex conditional loading, all can be configured through the above methods.