Adding new fields to the form config panel and making them required.

[Ben-Gallienne]

Hi,
We're trying out the form builder tool and want to add a couple of additional fields to the form properties config panel, and also make them required before allowing the form to save. We've tried several different approaches to getting the right settings in to the config definition so that the field shows as required (I believe this is what the ElementRequired component is for). And then further we've been unable to trigger the validation and stop a save emission at all, so I can only assume we are doing something wrong.

Do you have any examples please of how we should do this? For reference we'd like to make the existing form name field required, and then add a couple of new dropdown fields of our own that would also require values before the built form template could be saved. Here's an example of one of the dropdowns, and a screenshot of what we get in the builder as output.

const FormTemplateTypeIdField = class extends BaseFormField {
	name = 'FormTemplateTypeIdField';

	get schema() {
		return {
			form_template_type_id: {
				type: 'select',
				label: 'Form Type',
				columns: { label: 5 },
				rules: ['required'],
				items: async function () {
					try {
						const response = await axios.get('/api/v2/form-template-types');
						return response.data?.data?.map((type: FormTemplateType) => ({
							value: type.id,
							label: type.title
						}));
					} catch (error) {
						return [];
					}
				}
			}
		};
	}
};

[adamberecz]

Hi Ben,

Thanks for bringing this up – here’s a demo:
https://stackblitz.com/edit/github-ys6hcrvh?file=builder.config.js

A bit of background on how this currently works:

By default, the builder does not validate config fields internally. Validation is expected to happen externally in the @save event. For example, imagine the builder loads with a required form-level setting already empty. If the user never interacts with that field, there would otherwise be no indication that it needs to be filled in. Because of this, the intended flow is to validate the received data inside your @save handler before persisting it.

This is also why there’s currently no first-class API for adding validation rules to config fields. Internally, config panel element templates intentionally strip out the error rendering parts to reduce component tree size and overhead. That said, there’s been growing demand for this functionality, so it’s definitely something to consider for a future release.

For now, it can still be achieved with a small workaround.

First, restore the original element layout so validation errors can actually be displayed:

import {
  defineConfig,
  sections,
  separators,
  BaseFormField,
} from '@vueform/builder';
import config from './vueform.config';
import { markRaw } from 'vue';

const ElementLayout = markRaw(config.theme.templates.ElementLayout);

const FormTemplateTypeIdField = class extends BaseFormField {
  name = 'FormTemplateTypeIdField';

  get schema() {
    return {
      form_template_type_id: {
        type: 'select',
        label: 'Form Type',
        columns: { label: 5 },
        rules: ['required'],
        templates: {
          ElementLayout, // <----- HERE
        },
        // ...
      },
    };
  }
};

Then override the save method to prevent invalid values from overwriting an existing valid one:

const FormTemplateTypeIdField = class extends BaseFormField {
  name = 'FormTemplateTypeIdField';

  get schema() {
    return {
      // ...
    };
  }

  // Prevent empty values from replacing
  // an already valid value.
  save(value, old, key, el$) {
    if (!value) return;
    this.update({ [key]: value });
  }
};

Hope this helps for now. Let me know if you run into any issues with the workaround or if something still behaves unexpectedly on your side.

[Ben-Gallienne]

That's super helpful, thanks for the swift response!