Online Examples

The following are FormCreate's feature demonstrations and reference cases to help developers quickly understand how to use and extend it in actual projects.

Simple Example

A simple form example showing how to use FormCreate to generate forms and handle submit events.

Usage Tutorial

Detailed usage tutorials help you understand FormCreate's features and usage more deeply.

• Usage Tutorial

Business Scenario Examples

FormCreate plays an important role in various business scenarios. The following are several common application scenarios:

Dynamic Form Generation

Suppose you have a form that needs to be dynamically generated based on user selection. Use FormCreate to achieve this:

Form Linkage Effects

Easily implement linkage between form items, such as dynamically showing or hiding other form items based on the value of a dropdown box.

Dynamic Component Loading

In complex scenarios, dynamically load different components based on business logic. FormCreate provides a flexible dynamic loading mechanism.

const dynamicComponent = () => import('./CustomComponent.vue');


const rule = ref([
    {
        component: dynamicComponent,
        field: 'custom_field',
        title: 'Custom Component'
    }
]);

Using Custom Components

In addition to built-in components, integrate custom Vue components into FormCreate to easily achieve complex business requirements.

import MyCustomComponent from './MyCustomComponent.vue';
import formCreate from '@form-create/element-ui';


formCreate.component('MyCustomComponent', MyCustomComponent);


const rule = ref([
    {
        type: 'MyCustomComponent',
        field: 'custom_field',
        title: 'Custom Component'
    }
]);

Loading Initial Data

In some scenarios, load initial data from an API and populate it into the form. Make API requests after form loading through the mounted hook and bind the obtained data to the form.

export default {
    data() {
        return {
            formData: {},
            rule: [
                { type: 'input', field: 'username', title: 'Username' },
                { type: 'input', field: 'email', title: 'Email' }
            ],
            option: {
                onSubmit: (formData) => {
                    console.log('Submit form data:', formData);
                }
            }
        };
    },
    mounted() {
        axios.get('/api/user')
            .then(response => {
                this.formData = response.data;
            });
    }
};

Form Data Submission

FormCreate provides convenient form submission methods. Send data to the server when submitting the form.

const options = ref({
    submitBtn: true,
    resetBtn: true,
    onSubmit: function (formData) {
        axios.post('/api/submit', formData)
            .then(response => {
                console.log('Submit successful:', response.data);
            })
            .catch(error => {
                console.error('Submit failed:', error);
            });
    }
});
// or
api.submit((formData)=>{
    axios.post('/api/submit', formData)
        .then(response => {
            console.log('Submit successful:', response.data);
        })
        .catch(error => {
            console.error('Submit failed:', error);
        });
})

Custom Validation Rules

In addition to built-in validation rules, FormCreate lets you customize validation logic to meet complex business requirements.

const rule = ref([
    {
        type: 'input',
        field: 'username',
        title: 'Username',
        validate: [
            { required: true, message: 'Username cannot be empty' },
            {
                validator: async (rule, value) => {
                    const isExist = await axios.get(`/api/check-username?username=${value}`);
                    if (isExist.data) {
                        return Promise.reject('Username already registered');
                    } else {
                        return Promise.resolve();
                    }
                },
                trigger: 'blur'
            }
        ]
    },
    {
        type: 'input',
        field: 'password',
        title: 'Password',
        validate: [
            { required: true, message: 'Password cannot be empty' },
            {
                validator: (rule, value) => {
                    if (value.length < 6) {
                        return Promise.reject('Password length cannot be less than 6 characters');
                    } else {
                        return Promise.resolve();
                    }
                },
                trigger: 'blur'
            }
        ]
    }
]);

Component Examples

• Input Input Box
• Password Password Input Box
• Textarea Multi-line Input Box
• Radio 单选框
• Cascader 多级联动
• Upload 上传
• Select 下拉选择框
• Checkbox 多选框
• InputNumber 数字输入框
• TimePicker 时间选择器
• TimeRangePicker 时间区间选择器
• DatePicker 日期选择器
• DateRangePicker 日期区间选择器
• Switch 开关
• ColorPicker 颜色选择框
• Rate 评分
• Slider 滑块
• Tree 树形组件
• TreeSelect 树形下拉选择框
• Transfer 穿梭框

Advanced Components

• Group Sub-form
• SubForm Grouping
• Layout Grid Layout