如何让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" ]
  }
]

当前问题 #

现在已经实现了自定义命令类型输入框，以及只包含SSH、REST选项的数组下拉框，但我希望用户输入自定义命令类型后，这个值能自动加入到下拉框的选项列表里。试过copyValueTo，但它只能修改model里的值，没法修改schema中的enum数组，满足不了需求。

别担心，这个问题可以通过监听输入变化动态更新schema，或者自定义控件来解决，我给你两种实用的思路：

方法一：监听输入变化，动态更新schema的enum数组 #

你可以在控制器里监听顶部自定义命令输入框的内容变化，一旦用户输入了有效内容，就把它添加到下拉框的选项列表里（注意要避免重复添加），然后触发表单重新渲染：

angular.module('yourApp').controller('FormController', function($scope) {
  // 初始化表单的schema、form和model
  $scope.schema = { /* 粘贴你的schema代码 */ };
  $scope.form = { /* 粘贴你的form代码 */ };
  $scope.model = {};

  // 监听自定义命令类型的输入变化
  $scope.$watch('model.personalizedCommandType', function(newVal, oldVal) {
    const trimmedVal = newVal?.trim();
    const enumArray = $scope.schema.properties.commands.items.properties.commandType.enum;
    if (trimmedVal && !enumArray.includes(trimmedVal)) {
      // 将新的命令类型加入选项列表
      enumArray.push(trimmedVal);
      // 通知表单重新渲染，更新下拉选项
      $scope.$broadcast('schemaFormRedraw');
    }
  });
});

方法二：自定义支持输入的下拉控件 #

如果想要更灵活的交互（比如允许用户直接在下拉框里输入新值），可以自定义一个angular-schema-form控件，把普通下拉框改成支持输入的组合控件，这样用户既能选已有选项，也能直接输入新值并同步到选项列表：

首先定义自定义控件：

angular.module('yourApp').config(function(schemaFormProvider) {
  schemaFormProvider.defineField('customCommandSelect', {
    template: `
      <div class="form-group" ng-class="{'has-error': form.$invalid}">
        <label class="control-label" ng-show="form.title">{{form.title}}</label>
        <input type="text" 
               class="form-control"
               list="commandOptions_{{$id}}"
               ng-model="model[form.key]"
               ng-change="addCustomCommand(model[form.key])">
        <datalist id="commandOptions_{{$id}}">
          <option ng-repeat="option in form.enum" value="{{option}}">{{option}}</option>
        </datalist>
      </div>
    `,
    controller: function($scope) {
      $scope.addCustomCommand = function(newVal) {
        const trimmedVal = newVal?.trim();
        if (trimmedVal && !$scope.form.enum.includes(trimmedVal)) {
          $scope.form.enum.push(trimmedVal);
        }
      };
    },
    scope: true
  });
});

然后修改你的FORM配置，替换成自定义控件：

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

这样不管是通过顶部的输入框，还是直接在下拉框里输入新值，都能把自定义命令类型添加到选项列表中啦。

内容的提问来源于stack exchange，提问作者Rorschach