Form Configuration

Configure UI-related form settings and options.

Form Global Configuration

Set Form Configuration

Configure forms using:

• Component Mode

Set form configuration in the template:

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

• Global Method

Create forms and configure them via global methods:

window.formCreateMobile.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
• wrap: Configure Field

Configure Form (form)

• Type: Object

• Description: Configure form display settings, including label and input alignment.

• Default Value:

  {
      required: 'auto',
      labelAlign: 'right',
      inputAlign: 'right'
   }

• Complete configuration items: Form props

Configuration Examples

Basic Configuration

const option = {
    form: {
        labelAlign: 'right',  // Options: 'left' | 'center' | 'right'
        inputAlign: 'right'   // Options: 'left' | 'center' | 'right'
    }
}

Label Left Aligned

const option = {
    form: {
        labelAlign: 'left',   // Left-align labels
        inputAlign: 'left'    // Left-align inputs
    }
}

Label Centered

const option = {
    form: {
        labelAlign: 'center',  // Center-align labels
        inputAlign: 'center'   // Center-align inputs
    }
}

Set Required Mark Display Method

const option = {
    form: {
        required: 'auto'  // Options: 'auto' | 'always' | 'never'
    }
}

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: 8  // Set grid spacing to 8px (recommend smaller values for mobile)
    }
}

Configure Submit Button (submitBtn)

• Type: Object

• Description: Configure submit button style and layout.

• Default Value:

  {
      type: 'primary',
      loading: false,
      disabled: false,
      block: true,
      innerText: 'Submit',
      size: 'small',
      show: true,
  }

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: Button_props

Configuration Examples

Basic Configuration

const option = {
    submitBtn: {
        innerText: 'Submit',
        type: 'primary',
        block: true,  // Full-width button
        show: true
    }
}

Custom Button Text and Style

const option = {
    submitBtn: {
        innerText: 'Save',
        type: 'primary',
        size: 'normal',  // Options: 'large' | 'normal' | 'small' | 'mini'
        block: true
    }
}

Hide Submit Button

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

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,
      block: true,
      innerText: 'Reset',
      size: 'small',
      show: false,
  }

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

• Complete configuration items: Button_props

Configuration Examples

Show Reset Button

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

Custom Reset Button Style

const option = {
    resetBtn: {
        show: true,
        innerText: 'Clear',
        type: 'default',
        size: 'normal',
        block: true
    }
}

Custom Reset Event

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

Configure FormItem (wrap)

• Type: Object

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

• Complete configuration items: Field_props

Configuration Examples

Global Label Width Setting

const option = {
    wrap: {
        labelWidth: '80px'  // Smaller label width recommended for mobile
    }
}

Global Input Alignment Setting

const option = {
    wrap: {
        inputAlign: 'left'  // Left-align inputs
    }
}

Complete Configuration Example

const option = {
    // Form overall configuration
    form: {
        labelAlign: 'right',
        inputAlign: 'right',
        required: 'auto'
    },


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


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


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


// Field configuration
    wrap: {
        labelWidth: '80px'
    }
}