ng-zorro-antd DatePicker 状态样式实战：使用 nzStatus 为日期选择器添加 error 与 warning 校验状态

UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载在 ng-zorro-antd基于 Ant Design 的 Angular UI 组件库中日期选择器nz-date-picker与范围选择器nz-range-picker都支持通过nzStatus输入属性展示表单校验状态取值error或warning对应呈现红色或橙色的边框与聚焦高亮效果。本篇以仓库内官方示例 status.md 及其组件 status.ts 为主体完整讲解该 API 的用法、渲染效果来源并结合源码说明状态类名是如何生成、又如何与nz-form表单状态联动自动驱动的帮助你在 Angular 表单中准确落地日期字段的校验视觉反馈。官方示例nzStatus 的两种取值官方示例文档 status.md 的说明非常凝练使用nzStatus为 DatePicker 添加状态可选error或者warning。对应的演示组件 status.ts 在垂直排布的nz-space中同时展示了单选与范围两种日期选择器、两种状态共 4 个用例可直接复制到工程中运行import { Component } from angular/core; import { NzDatePickerModule } from ng-zorro-antd/date-picker; import { NzSpaceModule } from ng-zorro-antd/space; Component({ selector: nz-demo-date-picker-status, imports: [NzDatePickerModule, NzSpaceModule], template: nz-space nzDirectionvertical stylewidth: 100% nz-date-picker *nzSpaceItem nzStatuserror stylewidth: 100% / nz-date-picker *nzSpaceItem nzStatuswarning stylewidth: 100% / nz-range-picker *nzSpaceItem nzStatuserror stylewidth: 100% / nz-range-picker *nzSpaceItem nzStatuswarning stylewidth: 100% / /nz-space }) export class NzDemoDatePickerStatusComponent {}从示例可以看到几个要点nzStatus是静态字符串属性即可生效如nzStatuserror也可以像测试用例 date-picker.component.spec.ts 中那样通过[nzStatus]status()绑定动态值nz-range-picker同样继承该能力整个范围输入框两个日期框与中间的分隔符会统一呈现状态色不设置nzStatus默认值时日期选择器呈现普通的边框与 hover/focus 交互样式。API 层面的参数定义可以在 doc/index.zh-CN.md 的属性表中确认[nzStatus]用于“设置校验状态”类型为error | warning默认值为空即无状态。状态值的类型定义NzStatusnzStatus输入属性的声明位于 date-picker.component.tsInput() nzStatus: NzStatus ;其类型NzStatus定义在 components/core/types/status.tsexport type NzStatus | error | warning;即 DatePicker 直接可设置的状态只有三种默认无状态、error、warning。需要注意nzStatus的取值范围比表单控件状态类型NzValidateStatus更窄——后者还包含success、validating这两个值只能通过表单联动间接获得不能直接写在nzStatus上。渲染原理nzStatus 如何变成 CSS 类名DatePicker 对nzStatus的处理集中在两个生命周期阶段全部位于 date-picker.component.ts初始化阶段组件内部维护了statusCls状态类映射、status、hasFeedback三个字段见 L296-L299初始为空对象与空字符串。变更检测阶段ngOnChanges中监听nzStatus变化一旦变化就调用setStatusStyles(this.nzStatus, this.hasFeedback)见 L782-L784。核心的setStatusStyles私有方法L947-L961做了三件事private setStatusStyles(status: NzValidateStatus, hasFeedback: boolean): void { // set inner status this.status status; this.hasFeedback hasFeedback; this.cdr.markForCheck(); // render status if nzStatus is set this.statusCls getStatusClassNames(this.prefixCls, status, hasFeedback); Object.keys(this.statusCls).forEach(status { if (this.statusCls[status]) { this.renderer.addClass(this.elementRef.nativeElement, status); } else { this.renderer.removeClass(this.elementRef.nativeElement, status); } }); }它通过工具函数 getStatusClassNames 把状态值换算为类名映射再用Renderer2在组件根元素上增删这些类保证状态切换例如从error切到warning或清空时旧类名会被正确移除export function getStatusClassNames( prefixCls: string, status?: NzValidateStatus, hasFeedback?: boolean ): NgClassInterface { return { [${prefixCls}-status-success]: status success, [${prefixCls}-status-warning]: status warning, [${prefixCls}-status-error]: status error, [${prefixCls}-status-validating]: status validating, [${prefixCls}-has-feedback]: hasFeedback }; }因此nzStatuserror最终会在nz-date-picker根节点上加上ant-picker-status-error类nzStatuswarning则加上ant-picker-status-warning类。这些类名对应的视觉样式在 components/date-picker/style/status.less 中定义通过picker-status-color混入分别以error-color/warning-color系列变量重写了日期选择器的默认配色——非禁用状态下的边框色、聚焦-focused/:focus时的文字色与外发光色、以及底部激活条-active-bar的背景色。也就是说状态样式不仅改变静态边框还完整覆盖了 hover、focus 与底部高亮条这一组交互态。与 nz-form 的联动由表单状态自动驱动nzStatus并非只能手动写死。在ngOnInit中DatePicker 订阅了NzFormStatusService的formStatusChanges流L671-L679this.nzFormStatusService?.formStatusChanges .pipe( distinctUntilChanged((pre, cur) pre.status cur.status pre.hasFeedback cur.hasFeedback), takeUntilDestroyed(this.destroyRef) ) .subscribe(({ status, hasFeedback }) { this.setStatusStyles(status, hasFeedback); });nzFormStatusService通过inject(NzFormStatusService, { optional: true })注入L286只有当日期选择器处于nz-form的校验控制之下时才有值。这意味着只要日期字段所在的表单项配置了校验error状态就会随控件状态自动出现且表单的nzHasFeedback会额外加上ant-picker-has-feedback类。这一行为在测试用例 NzTestDatePickerInFormComponent 中可以得到印证——该测试组件使用ReactiveFormsModuleNzFormModule在nzHasFeedback的nz-form-control中放置formControlName绑定的nz-date-picker用于验证表单状态驱动下的样式表现。实践建议手动校验场景如果校验逻辑在组件内部维护例如自定义日期合法性判断直接绑定[nzStatus]myStatus取值限于error | warning无需再关心类名。表单校验场景优先把日期选择器放进nz-form-itemnz-form-control由响应式表单的校验状态自动驱动此时手动设置nzStatus与表单状态可能相互覆盖建议二选一以表单联动为准。范围选择器nz-range-picker复用同一套NzDatePickerComponent逻辑nzStatus的写法与效果一致作用在整组输入上。可定制性由于状态最终体现为ant-picker-status-error/ant-picker-status-warning两个类名若品牌色与 Ant Design 默认色不同可在主题变量或全局样式中覆盖 status.less 对应的颜色变量而无需修改组件代码。综上nzStatus是 ng-zorro-antd 日期选择器中轻量但完整的校验状态入口一个Input、两个取值、一组确定的 CSS 类名以及与nz-form的自动联动机制构成了从手动到表单驱动的两种落地路径。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd 中通过 nzStatus 为 Cron Expression 设置校验状态的实现与原理ng zorro antd 中通过 nzStatus 为 Cron Expression 设置校验状态的实现与原理 本文基于 ng zorro antd 的 CUI组件前端antd InputNumber status 指南用 status 为数字输入框添加 error / warning 校验状态antd InputNumber status 指南用 status 为数字输入框添加 error / warning 校验状态 InputNumber 是前端UI组件设计系统Ant Design Cascader 组件 status 属性实战指南为级联选择器添加 error / warning 校验状态Ant Design Cascader 组件 status 属性实战指南为级联选择器添加 error / warning 校验状态 Cascader级联选择前端UI组件设计系统上一篇AI短视频自动化创作系统SmartVideo Pro深度解析下一篇AngularEditor高级扩展自定义指令与插件开发实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考