Form Configuration

Configure UI-related form settings and options.

Form Global Configuration

Setting Form Configuration

Configure forms using:

• Component Mode

Set form configuration in the template:

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

• Global Method

Create forms and configure them via global methods:

window.formCreate.create(rule, option)

Structure

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

• Default Value:

  {
      layout: 'horizontal',
      labelAlign: 'right',
      labelColProps: {
          span: 3
      },
      wrapperColProps: {
          span: 21
      }
  }

• Complete configuration items: Form props

Configuration Examples

Basic Configuration

const option = {
    form: {
        layout: 'horizontal',  // Horizontal layout
        labelAlign: 'right',  // Label right-aligned
        labelColProps: { span: 3 },  // Label occupies 3 columns
        wrapperColProps: { span: 21 } // Component occupies 21 columns
    }
}

Vertical Layout

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

Label Left-Aligned

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

Responsive Label Layout

const option = {
    form: {
        labelColProps: {
            xs: { span: 24 },  // Label occupies full row when <576px
            sm: { span: 12 },  // Label occupies half when >=576px
            md: { span: 8 },   // Label occupies 1/3 when >=768px
            lg: { span: 6 }    // Label occupies 1/4 when >=992px
        },
        wrapperColProps: {
            xs: { span: 24 },
            sm: { span: 12 },
            md: { span: 16 },
            lg: { span: 18 }
        }
    }
}

Set Form Size

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

Configure Layout (row)

• Type: Object

• Description: Configure form component layout and spacing.

• Default Value:

  {
      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,   // 8px spacing when <576px
            sm: 16,  // 16px spacing when >=576px
            md: 24,  // 24px spacing when >=768px
            lg: 32   // 32px spacing when >=992px
        }
    }
}

Configure Submit Button (submitBtn)

• Type: Object

• Description: Configure submit button style and layout.

• Default Value:

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

If you don't need to display the submit button, you can 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: 'primary',
        size: 'large',
        status: 'success'
    }
}

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  // Offset 6 columns to the left
        }
    }
}

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:

  {
       disabled: false,
       loading: false,
       type: 'secondary',
       innerText: 'Reset',
       show: false,
       col: undefined,
       click: undefined
  }

If you need to display the reset button, you can set resetBtn to true or set resetBtn.show to true.

• Complete configuration items: Layout Rules | Button_props

Configuration Examples

Show Reset Button

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

Custom Reset Button Style

const option = {
    resetBtn: {
        show: true,
        innerText: 'Clear',
        type: 'outline',
        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:

  {
      type: 'popover',
      position: 'tl',
      icon: 'icon-info-circle'
  }

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

• Hint components: Popover_props | Tooltip_props

Configuration Examples

Using Popover Hint

const option = {
    info: {
        type: 'popover',
        position: 'tl',  // Optional values: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb'
        icon: 'icon-info-circle',
        content: 'This is the field description'
    }
}

Using Tooltip Hint

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

Custom Hint Icon

const option = {
    info: {
        type: 'popover',
        position: 'tl',
        icon: 'icon-exclamation-circle',  // 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

Globally Set Label and Component Layout

const option = {
    wrap: {
        labelColProps: { span: 6 },
        wrapperColProps: { span: 18 }
    }
}

Globally Set Field Help Text

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

Complete Configuration Example

const option = {
    // Form overall configuration
    form: {
        layout: 'horizontal',
        labelAlign: 'right',
        labelColProps: { span: 3 },
        wrapperColProps: { span: 21 },
        size: 'medium'
    },


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


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


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


// Hint information configuration
    info: {
        type: 'popover',
        position: 'tl',
        icon: 'icon-info-circle'
    },


// FormItem configuration
    wrap: {
        labelColProps: { span: 6 },
        wrapperColProps: { span: 18 }
    }
}