Component Operations

The API provides powerful methods for operating components, enabling developers to manage and adjust form component rules and behaviors flexibly in different business scenarios.

Get Component Rule

Get Rule of Specified Field

The getRule method returns the rule for the specified field. You can choose to get the original rule or the current rule state.

interface getRule {
    (field:string):Rule
    (field:string, origin: true): Rule
}

• Example:

const rule = api.getRule('goods_name');
console.log(rule); // Get generation rule of current field

Get Component Rule by name

The getRefRule method gets the generation rule of a component by name. It's useful when multiple components share the same name.

interface getRefRule {
    (name:string):Rule | Rule[]
}

• Example:

const rule = api.getRefRule('input');
console.log(rule); // Get rule corresponding to specified name

Get Final Rendering Rule of Component

The getRenderRule method returns the final rendering rule of a component, which is the rule configuration in the component's current state.

interface getRenderRule {
    (field:string):Rule
}

• Example:

const rule = api.getRenderRule('input');
console.log(rule); // Get final rendering rule

Get Parent Rule of Component

The getParentRule method returns the rule of the parent component for the specified component.

interface getParentRule {
    (field:string|Rule):Rule
}

• Example:

const parent = api.getParentRule('input');
console.log(parent); // Rule of parent component

Insert Component

The prepend method inserts a new rule at the beginning of the form rules. It can be inserted at the first position, before a specified field, or as a child rule.

interface prepend {
    //Insert at first position
    (rule:Rule):void 
    //Insert before specified field
    (rule:Rule, field:string):void
    //Insert into children of specified field
    (rule:Rule, field:string, child:true):void
}

• Example:

api.prepend({
  type: "input",
  title: "Product Introduction",
  field: "goods_info",
  value: "",
  props: {
    type: "text",
    placeholder: "Please enter product introduction",
  },
  validate: [
    { required: true, message: 'Please enter product introduction', trigger: 'blur' },
  ],
}, 'goods_name'); // Insert new rule before 'goods_name'

The append method is used to append a new rule in the form rules. It can be inserted at the last position, after a specified field, or as a child rule.

interface append {
    //Insert at last position
    (rule:Rule):void 
    //Insert after specified field
    (rule:Rule, field:string):void
    //Insert into children of specified field
    (rule:Rule, field:string, child:true):void
}

• Example:

api.append({
  type: "input",
  title: "Product Introduction",
  field: "goods_info",
  value: "",
  props: {
    type: "text",
    placeholder: "Please enter product introduction",
  },
  validate: [
    { required: true, message: 'Please enter product introduction', trigger: 'blur' },
  ],
}, 'goods_name'); // Insert new rule after 'goods_name'

Remove Specified Component

The removeRule method is used to remove the component of the specified rule from the form and returns the removed rule.

type removeRule = (rule:Rule) => Rule

• Example:

const rule = { type: 'input', field: 'goods_info' };
api.removeRule(rule);
console.log('Rule removed:', rule);

Get Form Component Rules

The model method is used to get all generation rules or original rules of the current form.

interface model{                
    //Get Object rules
    ():Rule[]              
    //Get original rules
    (origin:true):Rule[]
}

• Example:

const rules = api.model(); // Get rules in current state
console.log(rules);
const originalRules = api.model(true); // Get original rules
console.log(originalRules);

Get Custom Component Rules

The component method is used to get rules of all custom components that have the name attribute defined.

interface component{                
    //Get Object rules
    ():Rule[]              
    //Get original rules
    (origin:true):Rule[]
}

• Example:

const componentRules = api.component(); // Get custom component rules in current state
console.log(componentRules);

Update Specified Rule

The updateRule method is used to overwrite and update the rule of the specified field.

type updateRule = (rule:Rule)=>void

• Example:

api.updateRule('goods_name', { props: {disabled: true} }); // Overwrite update rule of 'goods_name' field

The updateRules method is used to batch overwrite and update rules of multiple fields.

type updateRules = (rules:{[field:string]:Rule})=>void

• Example:

api.updateRules({ 'goods_name': { props: {disabled: true} }, 'price': { props: {disabled: true} } });

The mergeRule method is used to merge and update the rule of the specified field.

type mergeRule = (rule:Rule)=>void

• Example:

api.mergeRule('goods_name', { hidden: true }); // Merge update rule of 'goods_name' field

The mergeRules method is used to batch merge and update rules of multiple fields.

type mergeRules = (rules:{[field:string]:Rule})=>void

• Example:

api.mergeRules({ 'goods_name': { hidden: true }, 'price': { disabled: true } });

Update Custom Property

The setEffect method is used to update the custom property of the specified field.

type setEffect = (id:string, attr: string, value:any)=>void

• Example:

api.setEffect('goods_name', 'required', false); // Set 'required' property of 'goods_name' field to false

Examples

Dynamically Get and Update Generation Rules of Form Fields

In a dynamic form generation system, administrators can view and edit generation rules of form fields in real time.

// Get generation rule of specified field
const rule = api.getRule('username');
// Modify rule
rule.title = 'User Name';

Dynamically Insert and Remove Form Components Based on Specific Conditions

When users fill out forms, dynamically insert or remove related form components based on their input. For example, when the user selects "Yes", insert an additional explanation field, otherwise remove that field.

const explanationRule = {
    type: 'textarea',
    field: 'explanation',
    title: 'Explanation',
    props: { placeholder: 'Please enter explanation' }
};
// Dynamically insert or remove field based on user selection
if (api.getValue('requires_explanation') === true) {
    api.append(explanationRule, 'requires_explanation');
} else {
    api.removeRule(explanationRule);
}

Batch Update Generation Rules of Form Fields

In a multi-role management system, different roles see different form field configurations. Administrators can batch update form field rules to adapt to different role requirements.

const adminRules = {
    'username': { props: { disabled: false } },
    'email': { props: { disabled: false } },
    'role': { props: { disabled: false } }
};


const userRules = {
    'username': { props: { disabled: true } },
    'email': { props: { disabled: true } },
    'role': { props: { disabled: true } }
};


// Update rules based on role
const userRole = api.getData('userRole');
if (userRole === 'admin') {
    api.updateRules(adminRules);
} else {
    api.updateRules(userRules);
}

Batch Merge and Update Rules of Multiple Fields

In a dynamic form configuration scenario, multiple fields need to uniformly update their generation rules after user operations and perform rule merging operations.

const batchRules = {
    'address': { props: { placeholder: 'Please enter new address' } },
    'phone': { props: { disabled: true } },
    'email': { props: { type: 'email' } }
};
// Batch merge rules
api.mergeRules(batchRules);
// Batch update rules
fApi.updateRule(batchRules);