如何隐藏/删除在json模式表单Angular 2中生成的默认提交按钮

Question

Image of Issue（更新和取消都是正确的，不需要提交按钮） 我正在尝试在不生成默认提交按钮的情况下生成 json 模式表单。该按钮未在架构或 html 中引用，但仍会生成。我得到的最接近的是在架构中使用 "options": false ，这会导致暂时删除按钮的错误。 有谁知道如何解决这个问题？

{
  "type": "object", 
  "required": [
    "apiName",
    "targetHost",
    "targetPort",
    "numIterations",
    "concurrentUsers",
    "allowablePeakMemoryVariance",
    "allowableServiceResponseTimeVariance",
    "testSuite",
    "requestDelay",
    "TPSFreq",
    "rampUsers",
    "rampDelay",
    "testCaseDir",
    "testSuiteDir",
    "baseStatsOutputDir",
    "reportOutputDir"
  ],
  "properties": {
    "hiddenInput": {
      "type": "boolean",
      "widget": "hidden",
      "default": false,
      "addSubmit": false
    },

    "apiName": { "type": "string" },
    "targetHost": { "type": "string" },
    "targetPort": {
      "type": "string",
      "minimum": 1,
      "maximum": 65535
    },
    "memoryEndpoint": { "type": "string" },
    "numIterations": { "type": "integer", "minimum": 1 },
    "concurrentUsers": { "type": "integer", "minimum": 1 },
    "allowablePeakMemoryVariance": {
      "type": "number",
      "minimum": 0,
      "maximum": 100
    },
    "allowableServiceResponseTimeVariance": {
      "type": "number",
      "minimum": 0,
      "maximum": 100
    },
    "testSuite": {
      "type": "string",
      "enum": ["Default-1", "Default-2", "Default-3"]
    },
    "requestDelay": { "type": "integer", "minimum": 1 },
    "TPSFreq": { "type": "integer", "minimum": 1 },
    "rampUsers": { "type": "integer", "minimum": 1 },
    "rampDelay": { "type": "integer", "minimum": 0 },
    "testCaseDir": { "type": "string" },
    "testSuiteDir": { "type": "string" },
    "baseStatsOutputDir": { "type": "string" },
    "reportOutputDir": { "type": "string" }    
  },
  "layout" : [
    {
      "type": "flex",
      "flex-flow": "row wrap",
      "items": [
        "apiName",
        "numIterations",
        {
          "key": "requestDelay",
          "title": "Request Delay (ms)"
        }
      ]
    },
    {
      "type": "flex",
      "flex-flow": "row wrap",
      "items": [
        "targetHost",
        "concurrentUsers",
        {
          "key": "TPSFreq",
          "title": "TPS Frequency (s)"
        }
      ]
    },
    {
      "type": "flex",
      "flex-flow": "row wrap",
      "items": [
        "targetPort",
        {
          "key": "allowablePeakMemoryVariance",
          "title": "Memory Variance (%)"
        },
        "rampUsers"
      ]
    },
    {
      "type": "flex",
      "flex-flow": "row wrap",
      "items": [
        "memoryEndpoint",
        {
          "key": "allowableServiceResponseTimeVariance",
          "title": "Service Variance (%)"
        },
        {
          "key": "rampDelay",
          "title": "Ramp Delay (s)"
        }
      ]
    },
    { "key": "testSuite" },
    { "key": "testCaseDir", "title": "Test Case Directory" },
    { "key": "testSuiteDir", "title": "Test Suites Directory" },
    { "key": "baseStatsOutputDir", "title": "Base Stats Output Directory" },
    { "key": "reportOutputDir", "title": "Report Output Directory" }


  ]
} 

<div class="container">
    <div class="row">
        <div class=" column  col-md-8">
            <label>Config File Path *</label>
            <input class="form-control" type="string" [(ngModel)]="configPath" id="config-file-path" required>

        </div>
        <div class=" column col-md-4">
            <label>File Select</label>
            <input class="form-control" id="xml-file-name" placeholder="Click to Browse Files" [(ngModel)]="xmlFileName" type="string" onclick="javascript:document.getElementById('file').click();">
            <input id="file" type="file" (change)="fileSelector($event)" />

        </div>


    </div>
    <json-schema-form name="auto-generated-fields" ngDefaultControl [schema]="configSchema" ngModel="formData" [layout]="configSchema.layout" framework="bootstrap-4">
    </json-schema-form>
    <button class="btn btn-primary" id="update-config-file-btn" *ngIf="xmlFileName && configPath" (click)="onUpdate(formData)">Update</button>
    <button class="btn btn-primary" id="cancel-btn" (click)="onCancel()">Cancel</button>

</div>

Answer 1

如果您只想阻止提交按钮呈现，您可以覆盖默认的提交按钮小部件。 Angular2 Schema Form 包含一个NoneCompnent，它可以为您不想显示的任何内容提供无操作替换。

你的.component.html：

<json-schema-form
[schema]="yourJsonSchema"
[layout]="yourJsonFormLayout"
[(data)]="yourData"
[widgets]="yourWidgets"
...
>
</json-schema-form>

你的.component.ts：

...

import { NoneComponent } from 'angular2-json-schema-form';

...

@Component({
  selector: 'app-your-component',
  templateUrl: './your.component.html',
  ...
})
export class YourComponent {

  yourWidgets = {
    submit: NoneComponent,  
  }

...