如何在 Form.io 中隐藏像按钮一样的组件

Question

我正在努力让 Formio 隐藏我的表单的按钮组件。我需要在表单中隐藏我的提交按钮。请帮忙。提前致谢

我认为唯一应该工作的东西可以在我的代码中看到。我也尝试将其作为数组放在我的renderOptions中。什么都没用。

.HTML：

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

我的formioRenderOption需要在这里设置隐藏按钮吗？

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

我的 Formio JSON 文件带有 2 个按钮：

        {
            "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": ""
            },

现在我的表单是只读的，但是，按钮仍然可见且不隐藏。

Answer 1

您可以设置不希望显示为 true 的组件的隐藏属性。

"hidden": true

如果要根据表单中其他组件的值有条件地显示或隐藏组件，则可以使用组件对象的条件属性。

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

在这里，"show"属性将保存">

true"或"false"，"when"属性将保存条件，"json"属性将保存任何其他json验证代码。

我希望这将解决您的问题。

Answer 2

您可以按照此处的答案将隐藏属性设置为 true！或者，如果您想在任何特定时间内设置表单加载后隐藏的属性，您可以执行此操作

controller: ['$scope', '$rootScope', function ($scope, $rootScope) {
         $scope.component.type='hidden';
    }],

这会将属性类型更改为

表单域类型隐藏