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)

Composition

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:

  {
     inline: false,
     labelPlacement: 'left',
     labelWidth: '125px',
     disabled: false,
     size: undefined,
   }

• Complete configuration items: Form props

Configuration Examples

Basic Configuration

const option = {
    form: {
        labelPlacement: 'left',  // Label position: 'left' | 'top' | 'right'
        labelWidth: '125px',     // Label width
        size: 'medium'           // Form size
    }
}

Label Top Aligned

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

Label Right Aligned

const option = {
    form: {
        labelPlacement: 'right'  // Label at right
    }
}

Inline Form

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

Set Form Size

const option = {
    form: {
        size: 'large'  // Options: 'tiny' | '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
    }
}

Configure Submit Button (submitBtn)

• Type: Object

• Description: Configure submit button style and layout.

• Default Value:

  {
      type: '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',
        type: 'primary',
        show: true
    }
}

Custom Button Text and Style

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

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 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
        }
    }
}

Configure Reset Button (resetBtn)

• Type: Object

• Description: Configure reset button style and layout.

• Default Value:

  {
      type: '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

Display Reset Button

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

Custom Reset Button Style

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

Floating Tooltip (info)

• Type: Object

• Description: Configure component hint messages

• Default Value:

  {
       type: 'popover',
       placement: 'top-start',
       icon: 'icon-info'
   }

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-start',  // Options: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
        icon: 'icon-info',
        content: 'This is field description'
    }
}

Using Tooltip Hint

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

Custom Hint Icon

const option = {
    info: {
        type: 'popover',
        placement: 'top-start',
        icon: 'icon-warning',  // 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: {
        labelPlacement: 'left',
        labelWidth: '125px',
        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: 'default'
    },


// Hint information configuration
    info: {
        type: 'popover',
        placement: 'top-start',
        icon: 'icon-info'
    },


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