Search code examples
javascriptformio

How can make I fields mandatory during Formio editing?


I'm building a form editing page using the Formio editor and renderer.
I'd like to make specific form fields mandatory in the form editor. [different than making the field entry mandatory during submission]

There are two roles in the application -
Editor - Modifies the formio definition.
User - Submits the form data.

I'm specifically interested in making several 'meta-data' fields mandatory for the Editor. The Editor should not be able to remove certain fields from the formio component list.

A couple options I'm considering for implementation -

  • When the form is saved, inspect the form components and ensure the mandatory fields exist, and if they dont, create them.
  • Set a flag in the UI for specific components so they are 'disabled' and cannot be removed in the formio editor.

Has anyone implemented this?


Solution

  • You seem to be going in the right direction. You can definitely do (as you suggested):

    • When the form is saved, inspect the form components and ensure the mandatory fields exist, and if they dont, create them or throw an error

    Along with this, you can also extend the form builder and remove the "remove" icon that appears in the builder next to these mandatory components. To do this,

    • Add a custom property to all the components, something like "customIsMandatory"
    • Modify the options.templates of the WebformBuilder to show a different template (one with "remove" icon removed) if the "customIsMandatory" is true for this component.
    • You can pre-populate these mandatory components in the builder and make sure that this property is set to true for them.