Form Default Configuration

Modify the form's global configuration in the designer using config.formOptions for greater customization and control. These options affect all forms created with this designer.

Data Structure

formOptions provides configuration options for adjusting form appearance and behavior. Data structure:

This is for ElementUI/ElementPlus form configuration. For AntDesignVue, see Form Configuration

type Options = {
    // Form configuration
    form?: {
        // Label position
        labelPosition?: string;
        // Label width
        labelWidth?: string;
        // Label suffix
        labelSuffix?: string;
        // Hide red asterisk next to required field label
        hideRequiredAsterisk?: boolean;
        // Display validation error messages
        showMessage?: boolean;
        // Display validation information inline
        inlineMessage?: boolean;
        // Form size
        size?: 'large' | 'default' | 'small';
    };
    // Submit button configuration
    submitBtn?: {
        // Whether to show submit button
        show?: boolean;
        // Button text
        innerText?: string;
    };
    // Reset button configuration
    resetBtn?: {
        // Whether to show reset button
        show?: boolean;
        // Button text
        innerText?: string;
    };
    // Form submission event
    onSubmit: (formData: Object, api: Api) => void;
    // Form change event
    onChange: (field: string, value: any, opt: {
        rule: Rule;
        api: Api;
        setFlag: boolean;
    }) => void;
    // Callback before form mount
    onCreated: (api: Api) => void;
    // Callback after form mount
    onMounted: (api: Api) => void;
    // Callback after form rules reload
    onMounted: (api: Api) => void;
    // Callback function before request is sent
    beforeFetch: (config: Object, form: {
        api: Api;
        rule: Rule;
    }) => void | Promise<any>;
}

For more details, see Global Configuration

Note

Default form configuration only affects newly created forms, not existing forms.

Modify Default Size of Design Form

Configure the form's default size using formOptions:

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        formOptions: {
            form: {
                size: 'default',// Set default size
            }
        }
    }
</script>

Hide Default Submit Button

Hide the default submit button using submitBtn.show:

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        formOptions: {
            submitBtn: {
                show: false // Hide submit button
            }
        }
    }
</script>

Customize Form Submission Logic

Customize form submission logic using onSubmit:

<template>
  <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
const config = {
    formOptions: {
        onSubmit: (formData) => {
            console.log('Form submission data:', formData); // Custom submission processing logic
        }
    }
};
</script>