Form Configuration

This guide explains how to configure UI-related settings in form configuration and details the purpose of each configuration option.

Form Global Configuration

Setting Form Configuration

Here are the ways to set form configuration:

• Component Mode

Set form configuration in the template:

<form-create :option="option"></form-create>

• Global Method

You can also create forms and configure them using global methods:

window.formCreate.create(rule, option)

Composition

The global configuration additionally supports the following configuration items:

• form: Form overall display rule configuration
• row: Form component layout configuration
• submitBtn: Submit button style configuration
• resetBtn: Reset button style configuration
• info: Component hint message configuration
• wrap: Configure FormItem

Configure Form (form)

• Type: Object

• Description: Configures the overall display rules of the form, such as label alignment and input alignment.

• Default Value:

  {
    // Inline form mode
    inline: false,
    // Position of form field label. When set to left or right, label-width must be set
    labelPosition: 'right',
    // Suffix of form field label
    labelSuffix: undefined,
    // Whether to display the red asterisk next to required field labels
    hideRequiredAsterisk: false,
    // Width of form field label, e.g., '50px'. Form-items that are direct children of Form inherit this value. Supports 'auto'.
    labelWidth: '125px',
    // Whether to display validation error messages
    showMessage: true,
    // Whether to display validation information inline
    inlineMessage: false,
    // Whether to display validation result feedback icon in the input box
    statusIcon: false,
    // Whether to trigger validation immediately after the rules property changes
    validateOnRuleChange: true,
    // Whether to disable all components in this form. If set to true, the disabled property on form components will no longer take effect
    disabled: false,
    // Controls the size of components in this form: medium / small / mini
    size: undefined,
    // Whether to display label
    title: true
  }

• Complete configuration items: Form props

Configuration Examples

Basic Configuration

const option = {
    form: {
        labelPosition: 'right',  // Label position
        labelWidth: '125px',     // Label width
        size: 'default'          // Form size
    }
}

Label Left Aligned

const option = {
    form: {
        labelPosition: 'left',   // Label left aligned
        labelWidth: '125px'
    }
}

Label Top Aligned

const option = {
    form: {
        labelPosition: 'top'     // Label at top
    }
}

Inline Form

const option = {
    form: {
        inline: true  // Inline form mode
    }
}

Hide Required Marker

const option = {
    form: {
        hideRequiredAsterisk: true  // Hide red asterisk for required fields
    }
}

Display Validation Icon

const option = {
    form: {
        statusIcon: true  // Display validation result feedback icon in input box
    }
}

Set Form Size

const option = {
    form: {
        size: 'large'  // Optional values: 'large' | 'default' | 'small'
    }
}

Configure Layout (row)

• Type: Object

• Description: Configures the layout of form components, such as spacing between components.

• Default Value:

  {
    // Grid spacing
    gutter: 0,
    // Layout mode, optional 'flex', works in modern browsers
    type: undefined,
    // Vertical alignment in flex layout: top/middle/bottom
    align: undefined,
    // Horizontal alignment in flex layout: start/end/center/space-around/space-between
    justify: undefined,
    // Custom element tag
    tag: 'div'
  }

• Complete configuration items: Row props

Configuration Examples

Set Grid Spacing

const option = {
    row: {
        gutter: 20  // Set grid spacing to 20px
    }
}

Use Flex Layout

const option = {
    row: {
        type: 'flex',           // Use flex layout
        justify: 'space-between', // Space between
        align: 'middle'         // Vertical center
    }
}

Configure Submit Button (submitBtn)

• Type: Object

• Description: Configures the style and layout of the submit button.

• Default Value:

  {
    // Type: primary / success / warning / danger / info / text
    type: "primary",
    // Size: medium / small / mini
    size: "medium",
    // Whether it's a plain button
    plain: false,
    // Whether it's a round button
    round: false,
    // Whether it's a circle button
    circle: false,
    // Whether it's in loading state
    loading: false,
    // Whether it's disabled
    disabled: false,
    // Icon class name
    icon: 'el-icon-upload',
    // Button width
    width: '100%',
    // Whether to focus by default
    autofocus: false,
    // Native type attribute
    nativeType: "button",
    // Button content
    innerText: "Submit",
    // Whether button is displayed
    show: true,
    // Button layout rules
    col: undefined,
    // Button click event
    click: undefined,
  }

To hide the submit button, set submitBtn to false or set submitBtn.show to false.

• Complete configuration items: Layout Rules | Button_props

Configuration Examples

Basic Configuration

const option = {
    submitBtn: {
        innerText: 'Submit',
        type: 'primary',
        show: true
    }
}

Custom Button Text and Style

const option = {
    submitBtn: {
        innerText: 'Save',
        type: 'success',
        size: 'large',
        icon: 'el-icon-check'
    }
}

Round Button

const option = {
    submitBtn: {
        innerText: 'Submit',
        type: 'primary',
        round: true  // Round button
    }
}

Hide Submit Button

const option = {
    submitBtn: false  // or submitBtn: { show: false }
}

Custom Button Layout

const option = {
    submitBtn: {
        innerText: 'Submit',
        col: {
            span: 12,  // Button occupies 12 columns
            offset: 6  // Left offset 6 columns
        }
    }
}

Custom Submit Event

const option = {
    submitBtn: {
        innerText: 'Submit',
        click: (formData, fApi) => {
            console.log('Submit data:', formData)
            // Custom submit logic
            return false  // Return false to prevent default submit
        }
    }
}

Configure Reset Button (resetBtn)

• Type: Object

• Description: Configures the style and layout of the reset button.

• Default Value:

  {
    type: "default",
    size: "medium",
    plain: false,
    round: false,
    circle: false,
    loading: false,
    disabled: false,
    icon: 'el-icon-refresh',
    width: '100%',
    autofocus: false,
    nativeType: "button",
    innerText: "Reset",
    show: false,
    col: undefined,
    click: undefined,
  }

To display the reset button, set resetBtn to true or set resetBtn.show to true.

• Complete configuration items: Layout Rules | Button_props

Configuration Examples

Display Reset Button

const option = {
    resetBtn: {
        show: true,
        innerText: 'Reset',
        type: 'default'
    }
}

Custom Reset Button Style

const option = {
    resetBtn: {
        show: true,
        innerText: 'Clear',
        type: 'info',
        size: 'large',
        icon: 'el-icon-delete'
    }
}

Custom Reset Event

const option = {
    resetBtn: {
        show: true,
        innerText: 'Reset',
        click: (fApi) => {
            console.log('Reset form')
            // Custom reset logic
            fApi.resetFields()  // Reset form fields
        }
    }
}

Floating Tooltip (info)

• Type: Object

• Description: Component hint message configuration

• Default Value:

  {
    // Hint message type: popover, tooltip
    type:"popover",
    align: "left"
  }

You can set the properties of the hint component in the info configuration option

• Hint components: Popover_props | Tooltip_props

Configuration Examples

Using Popover Hint

const option = {
    info: {
        type: 'popover',
        align: 'left',  // Alignment
        title: 'Hint',
        content: 'This is field description'
    }
}

Using Tooltip Hint

const option = {
    info: {
        type: 'tooltip',
        placement: 'top',  // Optional values: 'top' | 'bottom' | 'left' | 'right'
        content: 'This is field description'
    }
}

Custom Hint Position

const option = {
    info: {
        type: 'popover',
        align: 'right',  // Optional values: 'start' | 'end' | 'left' | 'right'
        title: 'Hint',
        content: 'This is field description'
    }
}

Disable Hint

const option = {
    info: false  // or info: { show: false }
}

Configure FormItem (wrap)

• Type: Object

• Description: Configures the display rules of the FormItem component, such as field styles and layout.

• Complete configuration items: FormItem_props

Configuration Examples

Global Label Width Setting

const option = {
    wrap: {
        labelWidth: '150px'  // Global label width
    }
}

Global Field Help Text Setting

const option = {
    wrap: {
        error: 'This is error message'  // Error message
    }
}

Complete Configuration Example

const option = {
    // Form overall configuration
    form: {
        labelPosition: 'right',
        labelWidth: '125px',
        size: 'default'
    },


// Grid layout configuration
    row: {
        gutter: 20
    },


// Submit button configuration
    submitBtn: {
        innerText: 'Submit',
        type: 'primary',
        show: true
    },


// Reset button configuration
    resetBtn: {
        show: true,
        innerText: 'Reset',
        type: 'default'
    },


// Hint information configuration
    info: {
        type: 'popover',
        align: 'left'
    },


// FormItem configuration
    wrap: {
        labelWidth: '125px'
    }
}