【问题标题】:schemaform adding the user input to a schema arrayschemaform 将用户输入添加到模式数组
【发布时间】:2018-05-29 18:29:29
【问题描述】:

背景

我正在使用angular-schema-form 制作表单

设置

我正在尝试制作用户可以使用表单制作的项目数组。因此,用户可以根据需要向数组中添加任意数量的项目。

现在数组中的项目包含一个命令类型。

命令类型应该是一个下拉列表,其中包含 SSH、REST 以及用户作为个性化命令类型输入的任何内容。

到目前为止的代码

架构

{
  "type": "object",
  "properties": {
    "personalizedCommandType": {
      "title": "Personalized Command Type",
      "type": "string"
    },
    "commands": {
      "type": "array",
      "title": "Actions",
      "items": {
        "type": "object",
        "properties": {
          "commandType": {
            "title": "Command Type",
            "type": "string",
            "enum": [
              "REST",
              "SSH"
            ]
          }
        }
      }
   }
  }
}

表格

[
  {
    "type": "help",
    "helpvalue": "<h5>Command</h5>"
  },
  {
    "key":"personalizedCommandType"
  },
  {
    "title":"Command",
    "key": "commands",
    "items": [
      "commands[].commandType"
    ]
  }
]

可以在这里测试这段代码:http://schemaform.io/examples/bootstrap-example.html。只需复制并粘贴到我的代码中即可。

问题

正如所见,我现在拥有的代码有一个带有个性化命令类型的字段和一组带有 SSH 和 REST 选项的下拉列表。但是,一旦用户输入了个性化命令类型的值,我想删除它。

注意

copyValueTo 似乎没有我想要的功能,因为它只能更改 model 中的值,但我希望它更改 schema。

【问题讨论】:

    标签: angularjs angular-schema-form


    【解决方案1】:

    使用onChange 选项:

    [
      {
        "type": "help",
        "helpvalue": "<h5>Command</h5>"
      },
      {
        "key":"personalizedCommandType"
         onChange: "updateSchema(modelValue,form)"
      },
      {
        "title":"Command",
        "key": "commands",
        "items": [
          "commands[].commandType"
        ]
      }
    ]
    

    更新架构:

    var defaultEnum = ["REST","SSH"];
    
    $scope.updateSchema = function(modelValue,form) {
        var currentEnum = $scope.schema.commands.items.properties.commandType.enum;
        angular.copy(defaultEnum, currentEnum);
        if (modelValue) {
            currentEnum.push(modelValue);
        }; 
        $scope.$broadcast('schemaFormRedraw');
    };
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-10-05
      • 1970-01-01
      • 2016-07-17
      • 1970-01-01
      • 2021-05-04
      • 1970-01-01
      相关资源
      最近更新 更多