How to hide component like a button in Form.io

Question

I am struggling with Formio hiding the button component of my form. I need to hide my submit button in my form. Please help. Thanks in advance

The only thing that I think should work you can see in my code. I have tried putting it to my renderOptions as an array as well. Nothing worked yet.

HTML:

<div>   
    <formio 
        [form]="structuredForm" 
        [submission]='{"data":formSubmission }'
        [renderOptions]="formioRenderOptions"
        hide-components="['submit', 'submit5']"> 
    </formio> 
</div>

My formioRenderOption do I need to set the hidden buttons here?

this.formioRenderOptions = {
  noAlerts: true,
  language: this.translateService.currentLang.replace('_', '-')
  i18n: '',
  readOnly: true,
};

My Formio JSON file with 2 buttons:

        {
            "label": "save",
            "action": "event",
            "showValidations": false,
            "event": "saveDraftEvent",
            "theme": "primary",
            "shortcut": "",
            "disableOnInvalid": true,
            "mask": false,
            "tableView": true,
            "alwaysEnabled": false,
            "type": "button",
            "key": "submit4",
            "input": true,
            "conditional": {
                "show": "",
                "when": "",
                "json": ""
            },
            "customConditional": "",
            "properties": {},
            "tags": [],
            "logic": [],
            "defaultValue": true
        },
        {
            "label": "next",
            "action": "event",
            "showValidations": false,
            "event": "submitApplicationEvent",
            "theme": "primary",
            "shortcut": "",
            "disableOnInvalid": true,
            "mask": false,
            "tableView": true,
            "alwaysEnabled": false,
            "type": "button",
            "key": "submit5",
            "input": true,
            "conditional": {
                "show": "",
                "when": "",
                "json": ""
            },

Right now my form is readOnly, however, the buttons are still visible and not hidden.

Answer 1

You can set the hidden property of the component that you don't want to show as true.

"hidden": true

If you want to show or hide the component conditionally based on the value of other components in the form then you can use a conditional property of the component object.

"conditional": {
    "show": "",
    "when": "",
    "json": ""
},

Here, "show" property will hold either 'true' or 'false', "when" property will hold the condition and "json" property will hold any other json validation code.

I hope this will solve your problem.