Formly表单Select组件始终保留空选项的实现问题

DevOps 小满

2026-5-29

我来帮你解决这个问题！你遇到的重复空选项问题，是因为之前的代码通过splice修改了原options数组，导致多次触发表达式时重复添加空选项。正确的做法是始终返回一个包含单个空选项的新数组，而不是修改原数组，这样就能保证空选项一直存在且不会重复。

解决代码

{
  className: 'col-xs-3',
  key: 'advanceOrArrears',
  type: 'select2',
  templateOptions: {
    label: 'Advance or Arrears',
    required: true,
    // 这里只保留基础选项，空选项通过表达式统一添加
    options: [
      {name: 'Advance', value: 'ADVANCE'},
      {name: 'Arrears', value: 'ARREARS'}
    ]
  },
  expressionProperties: {
    'templateOptions.options': function($viewValue, $modelValue, scope) {
      // 每次都返回一个新数组：空选项 + 基础选项
      return [{name: '', value: ''}, ...scope.to.options];
    }
  }
}

为什么这样有效？

避免重复修改原数组：之前用splice会直接修改templateOptions.options的原数组，当表达式多次触发（比如组件初始化、模型变化时），会重复插入空选项，导致出现多个空值。
始终保留空选项：通过返回新数组的方式，不管模型有没有选中值，空选项都会固定出现在最前面，不会因为选中其他选项而消失。
保持代码简洁：不需要判断模型状态，直接统一构建包含空选项的选项列表。

如果你的初始需求是默认显示空选项，同时允许用户选择其他选项后仍能切换回空选项，这个方案完全适用。