ng-zorro-antd Select 标签模式（nzMode=“tags“）实战指南：自由输入与动态标签的完整实现

UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读本文聚焦 ng-zorro-antd 的nz-select组件在nzModetags标签模式下的完整用法用户既可以像多选一样从预置选项中勾选也可以直接在输入框中键入任意内容并回车/失焦将其转化为一个动态标签。文章以 tags 示例 为骨架结合组件源码与官方 API 文档逐步拆解标签模式的模板写法、数据模型、自动分词、数量上限、标签折叠等核心能力帮助你快速在 Angular 项目中落地可输可选、即输即标的选择器交互。一、标签模式是什么从示例说起nz-select支持三种模式nzModedefault单选、multiple多选与tags标签。标签模式可以理解为多选 自由输入的混合体——它既保留了多选时把已选项渲染为 tag 的视觉形式又允许输入不在选项列表中的内容并把它自动升级为新的 tag。官方 demo tags.md 给出的描述是tags select随意输入的内容scroll the menu—— Select with tags, transform input to tag。其配套实现 tags.ts 是整个功能的最小完整示例import { Component } from angular/core; import { NzSelectModule } from ng-zorro-antd/select; function alphabet(): string[] { const children: string[] []; for (let i 10; i 36; i) { children.push(i.toString(36) i); } return children; } Component({ selector: nz-demo-select-tags, imports: [NzSelectModule], template: nz-select [nzOptions]options nzModetags nzPlaceHolderTag Mode /, styles: nz-select { width: 100%; } }) export class NzDemoSelectTagsComponent { readonly options alphabet().map(item ({ label: item, value: item })); }这段代码包含三个关键要素nzModetags开启标签模式这是全部行为的开关[nzOptions]options传入{ label, value }结构的选项数组demo 中用alphabet()生成了 26 个形如a10、c12的选项与下方组件签名一致{ label: string | number | TemplateRef; value: any; ... }见 index.zh-CN.mdnzPlaceHolderTag Mode输入框为空时的占位提示。其中imports: [NzSelectModule]是 Angular 独立组件standalone风格的导入方式使用 NgModule 的项目则应在模块的imports中声明NzSelectModule组件声明见 select.module.ts。二、标签模式下的数据模型与双向绑定标签模式与多选模式在数据模型上是一致的当nzMode为multiple或tags时ngModel或表单控件值是数组而非单选时的单个值。官方 API 表明确标注了这一点见 index.zh-CN.md[ngModel]当前选中的 nz-option 的 nzValue 值可双向绑定当nzMode为multiple或tags时ngModel 为数组。从源码看这一约定由 select.component.ts 的updateListOfValue统一保障内部始终以数组维护选中值仅在模式为default时取出第一个元素作为模型值返回其余模式直接返回数组const covertListToModel (list: NzSafeAny[], mode: NzSelectModeType): NzSafeAny[] | NzSafeAny { if (mode default) { if (list.length 0) { return list[0]; } else { return null; } } else { return list; } };因此在实际业务中标签模式与[(ngModel)]双向绑定后绑定的数据源天然就是一个string[]或any[]可以直接提交给后端接口。三、核心机制输入内容如何变成 tag标签模式最与众不同的地方在于输入即选项。其实现位于 select.component.ts 的updateListOfContainerItem当用户键入内容且当前模式为tags时组件会在选项列表中查找是否有nzLabel与输入内容完全相等的已注册选项若不存在则立即用输入内容动态生成一个临时 tag 项并将其置顶、设为当前激活项if (this.nzMode tags this.searchValue) { const matchedItem this.listOfTagAndTemplateItem.find(item item.nzLabel this.searchValue); if (!matchedItem) { const tagItem this.generateTagItem(this.searchValue); listOfContainerItem [tagItem, ...listOfContainerItem]; this.activatedValue tagItem.nzValue; } else { this.activatedValue matchedItem.nzValue; } }这也解释了 tags 示例中随意输入的内容的交互闭环输入内容与已有选项匹配 → 如同多选一样命中已有选项输入内容与任何选项都不匹配 → 生成新 tag按回车或点击即可选中从而把任意自由文本纳入值数组。四、配套进阶能力自动分词、数量上限与标签折叠tags 模式并非孤立的开关它与nz-select的多项参数组合出完整的实用场景。以下参数均来自 nz-select API 表且都有对应源码佐证。4.1 自动分词nzTokenSeparatorsnzTokenSeparators接收string[]默认[]在 tags 和 multiple 模式下输入中一旦出现分隔符如逗号组件会自动按分隔符把输入切分为多个标签。对应 demo 见 automatic-tokenization.tsnz-select nzModetags nzPlaceHolderautomatic tokenization [nzOptions]options [nzTokenSeparators][,] /其底层处理逻辑在 select.component.ts 的onTokenSeparate中先按nzLabel匹配已有选项并取nzValue再把未匹配的分隔片段作为新标签追加最终统一写入值数组。需要注意自动分词只对输入内容生效已选中的 tag 不会被动拆分。4.2 最多可选数量nzMaxMultipleCountnzMaxMultipleCount默认Infinity限制最多能选中多少个标签同样对 multiple 与 tags 模式生效。示例见 max-count.tsnz-select [nzOptions]options [nzMaxMultipleCount]3 nzModemultiple nzPlaceHolderPlease select nzAllowClear [(ngModel)]value /在 onTokenSeparate 中可以看到一个通用的截断工具函数limitWithinMaxCount无论通过点选、分词还是其他途径增加选中项最终都会受nzMaxMultipleCount约束。4.3 标签折叠nzMaxTagCount与nzMaxTagPlaceholder当选中项很多时可以用nzMaxTagCount限制展示的 tag 数量并用nzMaxTagPlaceholder自定义被隐藏部分的提示。multiple 模式的示例 multiple.ts 展示了完整的组合写法nz-select [nzOptions]options [nzMaxTagCount]3 [nzMaxTagPlaceholder]tagPlaceHolder nzModemultiple nzAllowClear nzPlaceHolderPlease select [(ngModel)]value / ng-template #tagPlaceHolder let-selectedListand {{ selectedList.length }} more selected/ng-templatenzMaxTagPlaceholder的类型为TemplateRef{ $implicit: any[] }即模板上下文会注入被隐藏的选中项数组示例中通过selectedList.length动态显示还有 N 项。这些参数在 tags 模式下同样适用——当自由输入累积了大量标签时折叠能力是保证界面整洁的关键。五、常见交互细节与工程建议5.1 选中后是否清空搜索框nzAutoClearSearchValue该参数默认true仅在 multiple 或 tags 模式下有效。源码 select.component.ts 中选中项后若该值为true则清空输入方便连续输入下一个标签若设为false则保留输入内容以便继续编辑。5.2 值与标签的对应关系tags 模式中动态新标签的value与label是同一个输入字符串由generateTagItem生成而通过nzOptions选中的标签其value取自选项对象。因此在使用[(ngModel)]接收值时需要自行区分这两种来源必要时在提交前做归一化处理。5.3 选项过滤的配合默认情况下组件会按输入内容在前端对选项进行过滤updateListOfContainerItem中通过nzFilterOption执行见 select.component.ts若开启nzServerSearch则改为服务端搜索。在 tags 模式下这一过滤只影响下拉候选列表的显示不影响输入内容直接成为标签的核心行为。5.4 样式与宽度demo 中统一给nz-select设置了width: 100%这是标签模式下的常见做法——标签较多时选择框需要足够的横向空间容纳换行与折叠。组件样式入口见 style/index.less其中 multiple.less 专门维护多选/标签模式下 tag 的排版细节。六、小结标签模式nzModetags是 ng-zorro-antd 的nz-select中可输可选能力的直接载体它以多选的数组数据模型为基础通过在输入时动态生成新选项源码位于 updateListOfContainerItem实现了自由文本的标签化并可与nzTokenSeparators自动分词、nzMaxMultipleCount数量上限、nzMaxTagCount/nzMaxTagPlaceholder折叠展示等参数自由组合。无论是给文章打标签、输入邮箱列表还是收集任意枚举之外的临时值这套组合都是开箱即用的完整方案。完整参数表与更多模式示例可继续查阅 Select 官方文档 及 demo 目录。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐Ant Design Select 标签模式tags实战指南自由输入、自动分词与自定义标签渲染Ant Design Select 标签模式tags实战指南自由输入、自动分词与自定义标签渲染 导读 Ant Design 的 Select 组件提供了前端UI组件设计系统Ant Design Select 标签模式tags实战指南自由输入与下拉选择的无缝结合Ant Design Select 标签模式tags实战指南自由输入与下拉选择的无缝结合 本文以 components/select/demo/tags.UI组件前端设计系统Naive UI 动态标签Dynamic Tags完全指南可输入、可删除、可自定义的标签组件实战Naive UI 动态标签Dynamic Tags完全指南可输入、可删除、可自定义的标签组件实战 动态标签Dynamic Tags是 Naive UI前端UI组件上一篇Linux Test Project (LTP) 终极使用指南从入门到精通下一篇7种语言支持NVIDIA-Nemotron-Labs-3-Puzzle-75B-A9B-NVFP4多语言应用实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考