Form Configuration

Configure UI-related settings for forms and understand each configuration option.

Form Global Configuration

Setting Form Configuration

Set form configuration using one of these methods:

• Component Mode

Set form configuration in the template:

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

• Global Method

Create forms and configure them using global methods:

window.formCreate.create(rule, option)

Structure

Global configuration supports these options:

• 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: Configure form display settings, including label and input alignment.

• Default Value:

  {
    layout: 'vertical',
    labelAlign: 'right',
    labelWidth: '125px'
  }

• Complete configuration items: Form props

Configuration Examples

Basic Configuration

const option = {
    form: {
        layout: 'vertical',  // Layout mode: 'vertical' | 'horizontal' | 'inline'
        labelAlign: 'right', // Label alignment: 'left' | 'right' | 'top'
        labelWidth: '125px'  // Label width
    }
}

Horizontal Layout

const option = {
    form: {
        layout: 'horizontal',  // Horizontal layout
        labelAlign: 'right',
        labelWidth: '125px'
    }
}

Inline Layout

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

Label Left Alignment

const option = {
    form: {
        layout: 'horizontal',
        labelAlign: 'left',  // Label left alignment
        labelWidth: '125px'
    }
}

Label Top Alignment

const option = {
    form: {
        layout: 'vertical',
        labelAlign: 'top'  // Label at top
    }
}

Configure Layout (row)

• Type: Object

• Description: Configure form component layout, including spacing between components.

• Default Value:

  {
      show: true,
      gutter: 0
  }

• 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,   // <768px spacing 8px
            sm: 16,  // ≥768px spacing 16px
            md: 24,  // ≥992px spacing 24px
            lg: 32   // ≥1200px spacing 32px
        }
    }
}

Configure Submit Button (submitBtn)

• Type: Object

• Description: Configure submit button style and layout.

• Default Value:

  {
      theme: 'primary',
      loading: false,
      disabled: false,
      innerText: 'Submit',
      show: true,
      col: undefined,
      click: undefined
  }

Hide the button by setting submitBtn=false or submitBtn.show=false

• Complete configuration items: Layout Rules | Button_props

Configuration Examples

Basic Configuration

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

Custom Button Text and Style

const option = {
    submitBtn: {
        innerText: 'Save',
        theme: 'primary',
        size: 'large'
    }
}

Hide Submit Button

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

Custom Button Layout

const option = {
    submitBtn: {
        innerText: 'Submit',
        col: {
            span: 6,  // Button occupies 6 columns
            offset: 3  // Left offset 3 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
        }
    }
}

Configure Reset Button (resetBtn)

• Type: Object

• Description: Configure reset button style and layout.

• Default Value:

  {
      theme: 'default',
      loading: false,
      disabled: false,
      innerText: 'Reset',
      show: false,
      col: undefined,
      click: undefined
  }

Show the button by setting resetBtn=true or resetBtn.show=true

• Complete configuration items: Layout Rules | Button_props

Configuration Examples

Show Reset Button

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

Custom Reset Button Style

const option = {
    resetBtn: {
        show: true,
        innerText: 'Clear',
        theme: 'light',
        size: 'large'
    }
}

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 Hint Box (info)

• Type: Object

• Description: Configure component hint messages

• Default Value:

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

Configure hint component properties in the info option

• Hint components: Popover_props | Tooltip_props

Configuration Examples

Using Popover Hint

const option = {
    info: {
        type: 'popover',
        placement: 'top-left',  // Options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom'
        icon: 'question-circle-o',
        content: 'This is field description'
    }
}

Using Tooltip Hint

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

Custom Hint Icon

const option = {
    info: {
        type: 'popover',
        placement: 'top-left',
        icon: 'error-circle-o',  // Custom icon
        content: 'Please fill in this field carefully'
    }
}

Disable Hint

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

Configure FormItem (wrap)

• Type: Object

• Description: Configure FormItem display settings, including field styles and layout.

• Complete configuration items: FormItem_props

Configuration Examples

Global Label Width Setting

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

Complete Configuration Example

const option = {
    // Form overall configuration
    form: {
        layout: 'vertical',
        labelAlign: 'right',
        labelWidth: '125px'
    },


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


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


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


// Hint message configuration
    info: {
        type: 'popover',
        placement: 'top-left',
        icon: 'question-circle-o'
    },


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