Form Events

When using FormCreate to generate forms, understanding how to handle various events is an important step in building dynamic forms. This section details how to listen to and handle form events through components and api, ensuring you can flexibly control form interaction behavior.

Listening to Form Events

FormCreate provides two ways to listen to form events: direct listening through components and listening through api.

Component Listening Method

Directly use v-on or the shorthand @ syntax in templates to listen to events.

<form-create @change="onChange"></form-create>

api Listening Method

Listen to events through the api object, which is more suitable for centralized event handling at the logic level.

api.on('change',this.onChange);

Events List

Event Name	Type	Trigger Timing
change	(field: string, value: any, rule: Rule, api: Api, setFlag: boolean) => void	Triggered when form field value changes (user input or code calls api.setValue). setFlag=true indicates triggered by code.
created	(api: Api) => void	Form instance creation completed, but DOM not rendered.
mounted	(api: Api) => void	Form first render completed (after DOM mounted).
reload	(api: Api) => void	After calling api.reload() method to reload form.
submit	(formData: Object, api: Api) => void	Click submit button or call api.submit().
remove-field	(field: string, rule: Rule, api: Api) => void	When calling api.removeField(field) to remove field.
remove-rule	(rule: Rule, api: Api) => void	When calling api.removeRule(rule) to remove rule.
repeat-field	(rule: Rule, api: Api) => void	When field duplication is detected when adding rules.
emit-event	(emitName: string, ...args: any[]) => void	emit event triggered within component (such as custom component's @change).
validate-fail	(e, api: Api) => void	Triggered when form validation fails.
control	(rule: Rule, api: Api) => void	When display/hide state controlled by control property in rules changes.

Examples

Form Submit Event

Listen to form submit event through the submit event

<template>
    <div>
        <form-create :rule="rule" @submit="handleSubmit"/>
    </div>
</template>
<script setup>
    import {ref} from 'vue';
    function handleSubmit(formData) {
        //todo submit form
    }
    const rule = ref([
        {
            type: 'input',
            field: 'goods_name',
            title: 'Product Name',
            value: 'form-create'
        },
        {
            type: 'checkbox',
            field: 'label',
            title: 'Label',
            value: [0, 1, 2, 3],
            options: [
                {label: 'Easy to use', value: 0},
                {label: 'Fast', value: 1},
                {label: 'Efficient', value: 2},
                {label: 'All-in-one', value: 3},
            ]
        },
        {
            type: 'el-button',
            title: 'Custom Button',
            native: false,
            on: {
                click() {
                    alert('Button clicked')
                }
            },
            children: ['Button']
        },
    ]);
</script>

Form Creation Complete Event

Listen to form creation complete event through the mounted event

<template>
    <div>
        <form-create :rule="rule" @mounted="handleMounted"/>
    </div>
</template>
<script setup>
    import {ref} from 'vue';
    function handleMounted(api) {
        api.disabled(true, ['goods_name'])
    }
    const rule = ref([
        {
            type: 'input',
            field: 'goods_name',
            title: 'Product Name',
            value: 'form-create'
        },
        {
            type: 'checkbox',
            field: 'label',
            title: 'Label',
            value: [0, 1, 2, 3],
            options: [
                {label: 'Easy to use', value: 0},
                {label: 'Fast', value: 1},
                {label: 'Efficient', value: 2},
                {label: 'All-in-one', value: 3},
            ]
        },
        {
            type: 'el-button',
            title: 'Custom Button',
            native: false,
            on: {
                click() {
                    alert('Button clicked')
                }
            },
            children: ['Button']
        },
    ]);
</script>