Field Operations

The API provides a comprehensive set of field operation methods that let you dynamically control and manipulate form fields at any stage. These methods help you handle form data and interaction requirements more flexibly.

Get Form Fields

The fields method returns an array of all field names in the form. This method is useful when you need to iterate over form fields or dynamically manipulate multiple fields at once.

type fields = ()=>string[]

• Example:

const fields = api.fields();
console.log(fields); // Returns an array of all field names in the form

Get Field Value

The getValue method retrieves the current value of a specified field by its name.

type getValue = (field:string) => any

• Example:

const value = api.getValue('goods_name');
console.log(value); // Returns the current value of the specified field

Set Form Value

Overwrite Field Values (coverValue)

The coverValue method overwrites all fields, setting undefined fields to undefined.

type coverValue = (formData:{[field:string]:any}) => void

• Example:

api.coverValue({ goods_name: 'HuaWei', price: 1000 });
// Overwrites all fields; undefined fields are set to undefined

Merge Field Values (setValue)

The setValue method merges the provided field values. Fields not included in formData remain unchanged.

interface setValue {
    (formData:{[field:string]:any}): void
    (field:string, value:any): void
}

• Example:

api.setValue({ goods_name: 'HuaWei', price: 1000 });
// Or set a specific field value separately
api.setValue('goods_name', 'HuaWei');

Alias methods: changeValue, changeField

Reset Form Values

The resetFields method resets all form field values, or resets values for specified fields.

interface resetFields {
    ():void
    (field:string[]):void
}

• Example:

api.resetFields(); // Resets all field values
api.resetFields(['goods_name', 'price']); // Resets only the specified fields

Hide Fields (No Rendering)

Hidden field components are not rendered, so no DOM nodes are created and form validation doesn't apply to them.

interface hidden {
    //Hide all components
    (status:Boolean):void
    //Hide specified component
    (status:Boolean, field:string):void
    //Hide some components
    (status:Boolean, field:string[]):void 
}

• Example:

api.hidden(true); // Hide all components
api.hidden(true, 'goods_name'); // Hide the specified component
api.hidden(true, ['goods_name', 'price']); // Hide multiple components

Get Component Hidden Status

The hiddenStatus method checks if the specified field is hidden.

type hiddenStatus = (field:string)=>Boolean

• Example:

const status = api.hiddenStatus('goods_name');
console.log(status); // Returns true or false

Hide Components (Rendered)

Hide components using display: none. Components remain rendered but are not visible.

interface display {
    //Hide all components
    (status:Boolean):void
    //Hide specified component
    (status:Boolean, field:string):void 
    //Hide some components
    (status:Boolean, field:string[]):void 
}

• Example:

fApi.display(false); // Show all components
fApi.display(false, 'goods_name'); // Show the specified component
fApi.display(false, ['goods_name', 'price']); // Show multiple components

Get Component Display Status

The displayStatus method checks if the specified field is currently displayed.

type displayStatus = (field:string)=>Boolean

• Example:

const status = fApi.displayStatus('goods_name');
console.log(status); // Returns true or false

Disable Components

The disabled method disables all components, specific components, or selected components in the form.

interface disabled {
    //Disable all components
    (status:Boolean):void 
    //Disable specified component
    (status:Boolean, field:string):void 
    //Disable some components
    (status:Boolean, field:string[]):void 
}

• Example:

fApi.disabled(true); // Disable all components
fApi.disabled(true, 'goods_name'); // Disable the specified component
fApi.disabled(true, ['goods_name', 'price']); // Disable multiple components

Remove Field

The removeField method removes the specified component from the form.

type removeField = (field:string) => Rule

• Example:

const rule = fApi.removeField('goods_name');
console.log(rule); // Returns the generation rule of the removed field

Refresh Component Rendering

The sync method manually refreshes the rendering of the component for the specified field.

interface sync{
    //Update specified component by field
    (field:string):void
    //Update specified component by generation rule
    (rule:Rule):void
}

• Example:

fApi.sync('goods_name'); // Refresh the component for the specified field
fApi.sync(rule); // Refresh the component using the generation rule

Component Methods

The exec method manually executes a specific method of the component for the specified field.

type exec = (field:string, method:string, ...args:any[]) => any

• Example:

fApi.exec('goods_name', 'focus'); // Make the component for the specified field gain focus

The method method retrieves a specific method of the component for the specified field, which can then be called manually later.

type method = (field:string, method:string) => Function

• Example:

const focusMethod = fApi.method('goods_name', 'focus');
focusMethod(); // Manually call the component's focus method

Manually Trigger Component Events

The trigger method manually triggers an event of the component for the specified field.

type trigger = (field:string, event:string, ...args:any[]) => void

• Example:

fApi.trigger('goods_name', 'change', 'new value'); // Manually trigger the change event

Get Component vm/dom Element

The el method retrieves the Vue instance or DOM element of the component for the specified field.

type el = (field:string) => Vue|Document|undefined

• Example:

const vm = fApi.el('goods_name');
console.log(vm); // Returns the Vue instance or DOM element of the component

Close Frame Component Modal

The closeModal method closes the modal of the specified frame component.

type closeModal = (field:string) => void

• Example:

fApi.closeModal('frame'); // Close the modal of the specified frame component

Examples

Dynamically Hide and Show Form Fields

When users fill out forms, you can dynamically hide or show related fields based on selected options. For example, when the user selects "Company Customer", show the company name field.

if (fApi.getValue('customer_type') === 'company') {
    fApi.hidden(false, 'company_name'); // Show the company name field
} else {
    fApi.hidden(true, 'company_name'); // Hide the company name field
}

Batch Set Form Field Values

In a complex form, you may need to batch fill multiple fields based on a template selected by the user.

const templateData = {
    name: 'Default Name',
    address: '123 Main St',
    city: 'Metropolis'
};
fApi.setValue(templateData); // Batch set form values

Remove Unnecessary Form Fields

In a dynamic form, when the user no longer needs a specific field, remove it to simplify the form.

if (fApi.getValue('needs_special_field') === false) {
    fApi.removeField('special_field'); // Remove the unnecessary field
}

Dynamically Sync Form Data

In an e-commerce platform, after the user selects a product, the system automatically fills in the product price and calculates the total price.

const productPrice = fApi.getValue('selected_product_price');
const quantity = fApi.getValue('quantity');
fApi.setValue('total_price', productPrice * quantity); // Calculate and set the total price
fApi.sync('total_price'); // Sync the display of the total price field

Automatically Clear and Reset Form State

After a form is submitted, the system automatically clears all form data and resets to the initial state, allowing users to fill out the form again.

fApi.submit().then(() => {
    fApi.coverValue({}); // Clear all form data
});