Form Rendering

Correctly handling JSON data format is crucial when using designed rules for form design and echo. This guide covers form rendering and includes examples for dynamically loading and saving form configurations.

Important

Always use formCreate.parseJson instead of JSON.parse, and formCreate.toJson instead of JSON.stringify to ensure correct data format.

Form Rendering

To render a form, mount form-create to your Vue application and load form rules and configuration.

Mount formCreate Example

// Import formCreate from designer
import {formCreate} from '@form-create/designer';
// Mount formCreate
app.use(formCreate);

Form Rendering Example

Get form rules from the backend and render the form using formCreate:

<template>
    <div id="app">
        <form-create v-if="rule.length" v-model="formData" v-model:api="fApi" @submit="handleSubmit" :rule="rule"
                     :option="option"></form-create>
    </div>
</template>
<script setup>
    import {formCreate} from '@form-create/designer';
    const rule = ref([]);
    const options = ref({});
    const fApi = ref(null);
    // Form data
    const formData = ref({});
    function handleSubmit(formData) {
        // Simulate submitting form data to backend
        axios.post('/api/submitFormData', formData)
            .then(response => {
                console.log('Submission successful:', response.data);
            })
            .catch(error => {
                console.error('Submission failed:', error);
            });
    }
    onMounted(() => {
        // Simulate loading form JSON rules from backend
        axios.get('/api/getFormRules')
            .then(response => {
                const {ruleJson, optionsJson, formData} = response.data;
                rule.value = formCreate.parseJson(ruleJson);
                options.value = formCreate.parseJson(optionsJson);
                formData.value = formData;
            })
            .catch(error => {
                console.error('Failed to load form rules:', error);
            });
    });
</script>

Notes

• Ensure the JSON data format returned from the backend is correct for formCreate.parseJson to work properly
• Adjust request URLs and data field names according to your API structure

These examples show how to implement dynamic form rendering and data persistence in Vue applications.