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';

    }],

这会将属性类型更改为

form-field-type-hidden

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

How to hide component like a button in Form.io

forms

formio

angular