Form Configuration

This guide explains how to set UI-related configurations in form configuration and details the role of each configuration item.

Form Global Configuration

Setting Form Configuration

The following are methods for setting form configuration:

• Component Mode

Set form configuration in the template:

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

• Global Method

You can also create forms and set form configuration 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

Configuring Form (form)

• Type: Object

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

• Default Value:

  {
      hideRequiredMark: false,
      layout: 'horizontal',
      labelAlign: 'right',
      labelCol: {
          span: 4
      },
      wrapperCol: {
          span: 20
      },
      colon: undefined,
      validateOnRuleChange: true,
      // Whether to display label
      title: true
  }

• Complete configuration items: Form props

Configuration Examples

Basic Configuration

const option = {
    form: {
        layout: 'horizontal',  // Horizontal layout
        labelAlign: 'right',   // Label right-aligned
        labelCol: { span: 6 }, // Label takes up 6 columns
        wrapperCol: { span: 18 } // Component takes up 18 columns
    }
}

Vertical Layout

const option = {
    form: {
        layout: 'vertical',  // Vertical layout
        labelAlign: 'left'   // Label left-aligned
    }
}

Inline Layout

const option = {
    form: {
        layout: 'inline'  // Inline layout, form items displayed in one row
    }
}

Label Left Alignment

const option = {
    form: {
        layout: 'horizontal',
        labelAlign: 'left',  // Label left-aligned
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    }
}

Hide Required Mark

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

Responsive Label Layout

const option = {
    form: {
        labelCol: {
            xs: { span: 24 },  // <576px label takes up full row
            sm: { span: 12 },  // ≥576px label takes up half
            md: { span: 8 },   // ≥768px label takes up 1/3
            lg: { span: 6 }    // ≥992px label takes up 1/4
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12 },
            md: { span: 16 },
            lg: { span: 18 }
        }
    }
}

Set Form Size

const option = {
    form: {
        size: 'large'  // Options: 'small' | 'middle' | 'large'
    }
}

Configuring Layout (row)

• Type: Object

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

  {
      gutter: 0,
      type: undefined,
      align: undefined,
      justify: undefined
  }

• Complete configuration items: Row props

Configuration Examples

Set Grid Spacing

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

Responsive Spacing

const option = {
    row: {
        gutter: {
            xs: 8,   // <576px: 8px spacing
            sm: 16,  // ≥576px: 16px spacing
            md: 24,  // ≥768px: 24px spacing
            lg: 32   // ≥992px: 32px spacing
        }
    }
}

Using Flex Layout

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

Configuring Submit Button (submitBtn)

• Type: Object

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

• Default Value:

  {
      disabled: false,
      ghost: false,
      icon: 'upload',
      loading: false,
      shape: undefined,
      size: undefined,
      type: 'primary',
      block: true,
      innerText: 'Submit',
      htmlType: undefined,
      show: true,
      col: undefined,
      click: undefined,
  }

Submit button configuration. Set submitBtn=false or submitBtn.show=false to hide the button

• Complete configuration items: Layout Rules | Button_props

Configuration Examples

Basic Configuration

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

Custom Button Text and Style

const option = {
    submitBtn: {
        innerText: 'Save',
        type: 'primary',
        size: 'large',
        icon: 'save'
    }
}

Hide Submit Button

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

Custom Button Layout

const option = {
    submitBtn: {
        innerText: 'Submit',
        col: {
            span: 12,  // Button takes up 12 columns
            offset: 6  // Left offset of 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 submission behavior
        }
    }
}

Set Button Loading State

const option = {
    submitBtn: {
        innerText: 'Submit',
        loading: true  // Button shows loading state
    }
}

Configuring Reset Button (resetBtn)

• Type: Object

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

• Default Value:

  {
      disabled: false,
      ghost: false,
      icon: 'sync',
      loading: false,
      shape: undefined,
      size: undefined,
      type: 'default',
      block: true,
      innerText: 'Reset',
      htmlType: undefined,
      show: false,
      col: undefined,
      click: undefined
  }

Reset button default configuration. Set resetBtn=true or resetBtn.show=true to display

• Complete configuration items: Layout Rules | Button_props

Configuration Examples

Show Reset Button

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

Custom Reset Button Style

const option = {
    resetBtn: {
        show: true,
        innerText: 'Clear',
        type: 'dashed',
        icon: 'reload',
        size: 'large'
    }
}

Custom Reset Event

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

Reset Button and Submit Button Side by Side

const option = {
    submitBtn: {
        innerText: 'Submit',
        col: { span: 12 }
    },
    resetBtn: {
        show: true,
        innerText: 'Reset',
        col: { span: 12 }
    }
}

Hover Tooltip (info)

• Type: Object

• Description: Component hint message configuration

• Default Value:

  {
    // Hint message type, popover, tooltip
    type: "popover",
    placement: 'topLeft',
    icon: 'question-circle-o'
  }

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

• Hint component: Popover_props | Tooltip_props

Configuration Examples

Using Popover Hint

const option = {
    info: {
        type: 'popover',
        placement: 'topLeft',
        icon: 'question-circle-o',
        title: 'Hint',
        content: 'This is the field description'
    }
}

Using Tooltip Hint

const option = {
    info: {
        type: 'tooltip',
        placement: 'top',
        icon: 'info-circle-o',
        title: 'This is the field description'
    }
}

Custom Hint Position

const option = {
    info: {
        type: 'popover',
        placement: 'right',  // Options: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'
        icon: 'question-circle-o'
    }
}

Custom Hint Icon

const option = {
    info: {
        type: 'popover',
        icon: 'exclamation-circle-o',  // Custom icon
        title: 'Notes',
        content: 'Please fill in this field carefully'
    }
}

Disable Hint

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

Configuring FormItem (wrap)

• Type: Object

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

• Complete configuration items: FormItem_props

Configuration Examples

Global Label and Component Layout Settings

const option = {
    wrap: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    }
}

Global Field Validation Hint Position

const option = {
    wrap: {
        validateStatus: 'error',  // Options: 'success' | 'warning' | 'error' | 'validating'
        hasFeedback: true  // Show validation icon
    }
}

Global Field Help Text

const option = {
    wrap: {
        extra: 'This is additional information for the field'
    }
}

Global Field Label Alignment

const option = {
    wrap: {
        labelAlign: 'left'  // Options: 'left' | 'right'
    }
}

Complete Configuration Example

const option = {
    // Form overall configuration
    form: {
        layout: 'horizontal',
        labelAlign: 'right',
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
        size: 'middle'
    },


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


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


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


// Hint information configuration
    info: {
        type: 'popover',
        placement: 'topLeft',
        icon: 'question-circle-o'
    },


// FormItem configuration
    wrap: {
        hasFeedback: true
    }
}