ng-zorro-antd 定时表达式组件：无边框模式（nzBorderless）实战与实现解析

• UI组件
• 前端

本篇以 ng-zorro-antd 的nz-cron-expression定时表达式组件为对象，围绕其无边框（Borderless）模式展开：先给出可直接复制的nzBorderless用法，再结合组件源码与样式文件解释该属性如何映射到ant-input-borderless类名、影响哪些 DOM 结构，并附上组件完整 API、cron 支持格式与单元测试验证路径，帮助你在表单场景中让定时表达式输入框与页面背景无缝融合。

什么时候需要无边框模式

nz-cron-expression是 ng-zorro-antd 中用于"显示和编辑 cron 表达式"的数据录入组件，其官方文档给出的使用场景是"需要在表单中使用 cron 格式验证时使用"（见 组件文档）。

组件默认渲染为一个带边框的输入组：外层.ant-cron-expression-input-group呈现标准ant-input输入框外观。当定时表达式输入框被嵌入卡片、描述列表、无边框布局或自定义容器中时，默认边框会显得突兀。此时启用nzBorderless即可隐藏边框，让输入区域与宿主容器视觉上融为一体。

官方 demo 仅有一行模板代码（见 borderless 示例）：

import { Component } from '@angular/core'; import { NzCronExpressionModule } from 'ng-zorro-antd/cron-expression'; @Component({ selector: 'nz-demo-cron-expression-borderless', imports: [NzCronExpressionModule], template: `<nz-cron-expression nzBorderless />` }) export class NzDemoCronExpressionBorderlessComponent {}

对应的描述文件为 borderless.md，中文说明即"没有边框"。使用前需安装 cron 表达式解析依赖（组件文档明确要求，别忘记）：

npm install cron-parser@^5.5.0

源码级实现：nzBorderless 如何生效

输入属性声明

在组件类 cron-expression.component.ts 中，nzBorderless使用 Angular 的信号化input+booleanAttribute转换声明（L142）：

@Input({ transform: booleanAttribute }) nzBorderless = false;

booleanAttribute意味着模板中只写nzBorderless（无值属性）也会被正确解析为true，无需nzBorderless="true"；默认值为false，即默认带边框。

模板类名绑定

组件内联模板将nzBorderless直接绑定到外层输入组的类名上（模板 L63-L82）：

<div class="ant-input ant-cron-expression-input-group" [class]="statusClasses()" [class.ant-input-lg]="nzSize === 'large'" [class.ant-input-sm]="nzSize === 'small'" [class.ant-input-borderless]="nzBorderless" [class.ant-input-focused]="focus" [class.ant-input-disabled]="nzDisabled" >

也就是说，nzBorderless的唯一渲染效果就是在.ant-cron-expression-input-group上追加 antd 输入控件体系的通用无边框类ant-input-borderless，由该类名负责移除输入组外框的边框与描边。组件采用ViewEncapsulation.None，样式不做视图封装，这正是该类名能被组件全局样式表命中的前提。

值得注意的是，组件的 LESS 样式中，输入组内的每个子输入框本身就始终是无边框的（见 style/index.less L18-L31）：

&-input-group { display: flex; flex-wrap: nowrap; align-items: center; input { width: 100%; padding: 0; border: none !important; border-radius: 0; outline: none; box-shadow: none !important; } }

因此从源码结构看，nzBorderless真正消除的是整组输入框最外层那条边框：开启前后，内部分割布局（秒/分/时/日/月/星各占 20% 宽度，见nz-cron-expression-input { width: 20% }）保持不变，只是外框消失。这与组件"输入框 + 标签行"的双行结构（ant-cron-expression-input-group与ant-cron-expression-label-group）配合，使无边框状态下仍可通过聚焦高亮（ant-input-focused）反馈当前交互位置。

子输入框结构

每组占位输入框由 NzCronExpressionInputComponent 渲染：内部是一个nz-input输入框，通过ngModel双向绑定，并在 focus 时自动全选文本（focusInputEffect中调用select()），方便用户直接输入覆盖旧值。该子组件不感知边框开关，边框外观完全由父组件类名控制，属于典型的"外观收敛在容器层"的实现方式。

完整 API 参考

无边框属性只是组件众多配置项之一，以下 API 表完整继承自组件官方文档 index.zh-CN.md，便于对照使用：

nz-cron-expression

几个与无边框模式常搭配的属性，可结合源码理解其行为：

• nzType：'linux'时标签列为minute/hour/day/month/week五段，'spring'时额外包含second，对应源码中labelsOfType()与cronFormType()（linux 模式下禁用 second 控件）。
• nzSize：同时作用于输入组与标签组（ant-input-lg/ant-input-sm），无边框状态下依旧生效。
• nzStatus：显式校验状态；组件内部还会将表单自身的INVALID状态计算为error（finalStatuscomputed，见 组件源码 L176-L185），并可继承外层NzFormStatusService的表单状态，与nzBorderless组合时可实现"无边框但带校验描边"的效果。
• nzCollapseDisable：隐藏下方预览折叠面板；默认情况下组件会解析 cron 表达式并预览未来 5 次执行时间（previewDate/loadMorePreview，基于cron-parser的CronExpressionParser）。

支持的 cron 格式

组件文档明确列出的支持格式如下（spring 类型 6 段、linux 类型 5 段，秒位为可选项）：

* * * * * * ┬ ┬ ┬ ┬ ┬ ┬ │ │ │ │ │ | │ │ │ │ │ └ day of week (0 - 7, 1L - 7L) (0 or 7 is Sun) │ │ │ │ └───── month (1 - 12) │ │ │ └────────── day of month (1 - 31, L) │ │ └─────────────── hour (0 - 23) │ └──────────────────── minute (0 - 59) └───────────────────────── second (0 - 59, optional)

组件内部通过CronExpressionParser.parse(cron)做合法性校验（cronValidatorFn，组件源码 L153-L163）：拼接各段值后解析失败即返回{ error: true }；同时组件实现了ControlValueAccessor与Validator，可直接与formControlName/ 响应式表单集成，模型值即为空格拼接的完整 cron 字符串（writeValue拆分回填、onChange回传）。

测试验证

组件测试 cron-expression.spec.ts L56-L62 对无边框行为做了断言：将nzBorderless置为true后，.ant-cron-expression-input-group的类表中应包含ant-input-borderless：

it('should nzBorderless work', () => { testComponent.nzBorderless.set(true); fixture.detectChanges(); expect(resultEl.nativeElement.querySelector('.ant-cron-expression-input-group').classList).toContain( 'ant-input-borderless' ); });

该测试与模板绑定逻辑一一对应，也说明无边框模式的生效点就是这一个类名，便于在自定义主题下排查样式冲突——若你的全局样式覆盖了ant-input-borderless相关规则，输入组外框表现可能与预期不一致。

小结

nzBorderless是nz-cron-expression的一个布尔型外观开关：默认false，开启后在输入组容器上追加ant-input-borderless类，移除输入组外框边框，而内部各段输入框的布局、校验、cron 预览等能力均不受影响。相关源码集中在 cron-expression 组件目录，示例见 borderless demo，样式见 style/index.less，API 与格式说明见 组件文档。

• UI组件
• 前端