如何移除AngularJS angular-formly下拉选框中的空选项？

核心原因 #

AngularJS 1.6+版本对select指令的行为做了调整：当ngModel的初始值不在选项列表中，或未设置有效值时，会自动生成一个空选项。结合angular-formly的表单渲染逻辑，升级后容易触发这个默认行为。

具体解决方法 #

• 确保初始值与选项列表匹配
  检查formly字段对应的model属性，初始化时必须设置为选项列表中存在的value值，而非undefined或null。
  示例代码：

  // 初始化表单model
  vm.formModel = {
    selectedOption: 'option1' // 对应options中的某个value
  };
  
  // formly字段配置
  vm.fields = [
    {
      key: 'selectedOption',
      type: 'select',
      templateOptions: {
        label: '选择选项',
        options: [
          {value: 'option1', label: '选项1'},
          {value: 'option2', label: '选项2'}
        ]
      }
    }
  ];
  

• 添加required属性强制移除空选项
  在formly字段的templateOptions中设置required: true，AngularJS会自动移除空选项，因为必填字段不允许未选择状态。

  {
    key: 'selectedOption',
    type: 'select',
    templateOptions: {
      label: '选择选项',
      options: [...],
      required: true
    }
  }
  

• 自定义ngOptions控制渲染逻辑
  直接在templateOptions中指定ngOptions语法，替代默认的选项渲染逻辑，避免自动生成空选项：

  {
    key: 'selectedOption',
    type: 'select',
    templateOptions: {
      label: '选择选项',
      ngOptions: 'opt.value as opt.label for opt in to.options',
      options: [...]
    }
  }
  

• 替换空选项为自定义默认项
  如果业务允许初始值为空，可在选项列表开头添加自定义默认选项，覆盖自动生成的空选项：

  options: [
    {value: '', label: '请选择'},
    {value: 'option1', label: '选项1'},
    {value: 'option2', label: '选项2'}
  ]
  

• 升级angular-formly到兼容版本
  确保angular-formly版本与AngularJS 1.8.3兼容，建议升级到v8.x系列（适配AngularJS 1.6+），避免版本不匹配导致的渲染问题。

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