schemaform将用户输入添加到模式数组

时间:2018-05-29 18:29:29

标签: angularjs angular-schema-form

背景

我正在使用angular-schema-form

制作表单

设置

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

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

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

到目前为止

代码

SCHEMA

{
  "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"
            ]
          }
        }
      }
   }
  }
}

FORM

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

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

问题

正如我所看到的,我现在拥有的代码有一个带有Personalized Command Type的字段和一个带有2个SSH和REST选项的下拉列表。但是我希望在用户输入后还包含Personalized Command Type的值。

注意

copyValueTo似乎没有我想要的功能,因为它只能更改模型中的值,但我希望它能更改中的枚举数组模式

1 个答案:

答案 0 :(得分:2)

使用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');
};