如何用TypeScript方式创建Formly多选下拉框？设置multiple:true遇阻

你遇到的核心问题是设置multiple: true后多选不生效，主要需要从初始值类型和组件属性配置两个方面调整：

关键修正点 #

1. 多选字段必须用数组作为初始值
   多选下拉框的选中值是数组类型，如果表单model中对应字段的初始值不是数组，Formly无法正确处理多选逻辑，需要提前把对应字段设为空数组。

2. 确保multiple属性正确传递
   你的代码已经在props中传入了multiple: true，但要确认Formly使用的select组件能识别该属性：原生HTML select直接支持multiple，如果是第三方UI库的Formly适配组件，可能需要用对应库的专属配置项（比如NG-ZORRO的nzMode: 'multiple'）。

修正后的代码示例 #

原生select场景 #

// 表单model，确保对应字段初始值为数组
const formModel = {
  'Job type': []
};

const jobName: FormlyFieldConfig = initMultipleSelect(
  'Job type',
  {
    multiple: true,
    label: 'Job type',
    options: jobTypeList,
    defaultValue: [] // 可选，显式设置默认空数组
  });   

export function initMultipleSelect(key: string, props: FormlyFieldProps): FormlyFieldConfig {
  return {
    className: 'select-selector',
    key: key,
    type: 'select',
    props: {
      ...props,
      // 确保multiple属性被正确传递到组件
      multiple: props.multiple
    },
    // 强制设置默认值为数组，避免初始值类型错误
    defaultValue: props.defaultValue ?? []
  };
};

第三方UI库（如NG-ZORRO）场景 #

如果用的是NG-ZORRO的Formly组件，需要用nzMode替代multiple：

const jobName: FormlyFieldConfig = initMultipleSelect(
  'Job type',
  {
    nzMode: 'multiple', // 替换为NG-ZORRO的多选配置
    label: 'Job type',
    options: jobTypeList,
    defaultValue: []
  });   

额外注意 #

• 若使用自定义select字段类型，需要在组件内部处理multiple属性，渲染原生<select multiple>或第三方多选组件。
• 提交表单时，对应字段的值会是选中选项值组成的数组，需确保后端接口能接收数组类型参数。

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