樣式實(shí)戰(zhàn)：使用 nzStatus 為日期選擇器添加 error 與 warning 校驗(yàn)狀態(tài))
UI組件前端【免費(fèi)下載鏈接】ng-zorro-antdAngular UI Component Library based on Ant Design項(xiàng)目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd點(diǎn)擊查看免費(fèi)下載在 ng-zorro-antd基于 Ant Design 的 Angular UI 組件庫(kù)中日期選擇器nz-date-picker與范圍選擇器nz-range-picker都支持通過(guò)nzStatus輸入屬性展示表單校驗(yàn)狀態(tài)取值error或warning對(duì)應(yīng)呈現(xiàn)紅色或橙色的邊框與聚焦高亮效果。本篇以倉(cāng)庫(kù)內(nèi)官方示例 status.md 及其組件 status.ts 為主體完整講解該 API 的用法、渲染效果來(lái)源并結(jié)合源碼說(shuō)明狀態(tài)類名是如何生成、又如何與nz-form表單狀態(tài)聯(lián)動(dòng)自動(dòng)驅(qū)動(dòng)的幫助你在 Angular 表單中準(zhǔn)確落地日期字段的校驗(yàn)視覺反饋。官方示例nzStatus 的兩種取值官方示例文檔 status.md 的說(shuō)明非常凝練使用nzStatus為 DatePicker 添加狀態(tài)可選error或者warning。對(duì)應(yīng)的演示組件 status.ts 在垂直排布的nz-space中同時(shí)展示了單選與范圍兩種日期選擇器、兩種狀態(tài)共 4 個(gè)用例可直接復(fù)制到工程中運(yùn)行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 {}從示例可以看到幾個(gè)要點(diǎn)nzStatus是靜態(tài)字符串屬性即可生效如nzStatuserror也可以像測(cè)試用例 date-picker.component.spec.ts 中那樣通過(guò)[nzStatus]status()綁定動(dòng)態(tài)值nz-range-picker同樣繼承該能力整個(gè)范圍輸入框兩個(gè)日期框與中間的分隔符會(huì)統(tǒng)一呈現(xiàn)狀態(tài)色不設(shè)置nzStatus默認(rèn)值時(shí)日期選擇器呈現(xiàn)普通的邊框與 hover/focus 交互樣式。API 層面的參數(shù)定義可以在 doc/index.zh-CN.md 的屬性表中確認(rèn)[nzStatus]用于“設(shè)置校驗(yàn)狀態(tài)”類型為error | warning默認(rèn)值為空即無(wú)狀態(tài)。狀態(tài)值的類型定義NzStatusnzStatus輸入屬性的聲明位于 date-picker.component.tsInput() nzStatus: NzStatus ;其類型NzStatus定義在 components/core/types/status.tsexport type NzStatus | error | warning;即 DatePicker 直接可設(shè)置的狀態(tài)只有三種默認(rèn)無(wú)狀態(tài)、error、warning。需要注意nzStatus的取值范圍比表單控件狀態(tài)類型NzValidateStatus更窄——后者還包含success、validating這兩個(gè)值只能通過(guò)表單聯(lián)動(dòng)間接獲得不能直接寫在nzStatus上。渲染原理nzStatus 如何變成 CSS 類名DatePicker 對(duì)nzStatus的處理集中在兩個(gè)生命周期階段全部位于 date-picker.component.ts初始化階段組件內(nèi)部維護(hù)了statusCls狀態(tài)類映射、status、hasFeedback三個(gè)字段見 L296-L299初始為空對(duì)象與空字符串。變更檢測(cè)階段ngOnChanges中監(jiān)聽nzStatus變化一旦變化就調(diào)用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); } }); }它通過(guò)工具函數(shù) getStatusClassNames 把狀態(tài)值換算為類名映射再用Renderer2在組件根元素上增刪這些類保證狀態(tài)切換例如從error切到warning或清空時(shí)舊類名會(huì)被正確移除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最終會(huì)在nz-date-picker根節(jié)點(diǎn)上加上ant-picker-status-error類nzStatuswarning則加上ant-picker-status-warning類。這些類名對(duì)應(yīng)的視覺樣式在 components/date-picker/style/status.less 中定義通過(guò)picker-status-color混入分別以error-color/warning-color系列變量重寫了日期選擇器的默認(rèn)配色——非禁用狀態(tài)下的邊框色、聚焦-focused/:focus時(shí)的文字色與外發(fā)光色、以及底部激活條-active-bar的背景色。也就是說(shuō)狀態(tài)樣式不僅改變靜態(tài)邊框還完整覆蓋了 hover、focus 與底部高亮條這一組交互態(tài)。與 nz-form 的聯(lián)動(dòng)由表單狀態(tài)自動(dòng)驅(qū)動(dòng)nzStatus并非只能手動(dòng)寫死。在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通過(guò)inject(NzFormStatusService, { optional: true })注入L286只有當(dāng)日期選擇器處于nz-form的校驗(yàn)控制之下時(shí)才有值。這意味著只要日期字段所在的表單項(xiàng)配置了校驗(yàn)error狀態(tài)就會(huì)隨控件狀態(tài)自動(dòng)出現(xiàn)且表單的nzHasFeedback會(huì)額外加上ant-picker-has-feedback類。這一行為在測(cè)試用例 NzTestDatePickerInFormComponent 中可以得到印證——該測(cè)試組件使用ReactiveFormsModuleNzFormModule在nzHasFeedback的nz-form-control中放置formControlName綁定的nz-date-picker用于驗(yàn)證表單狀態(tài)驅(qū)動(dòng)下的樣式表現(xiàn)。實(shí)踐建議手動(dòng)校驗(yàn)場(chǎng)景如果校驗(yàn)邏輯在組件內(nèi)部維護(hù)例如自定義日期合法性判斷直接綁定[nzStatus]myStatus取值限于error | warning無(wú)需再關(guān)心類名。表單校驗(yàn)場(chǎng)景優(yōu)先把日期選擇器放進(jìn)nz-form-itemnz-form-control由響應(yīng)式表單的校驗(yàn)狀態(tài)自動(dòng)驅(qū)動(dòng)此時(shí)手動(dòng)設(shè)置nzStatus與表單狀態(tài)可能相互覆蓋建議二選一以表單聯(lián)動(dòng)為準(zhǔn)。范圍選擇器nz-range-picker復(fù)用同一套NzDatePickerComponent邏輯nzStatus的寫法與效果一致作用在整組輸入上?？啥ㄖ菩杂捎跔顟B(tài)最終體現(xiàn)為ant-picker-status-error/ant-picker-status-warning兩個(gè)類名若品牌色與 Ant Design 默認(rèn)色不同可在主題變量或全局樣式中覆蓋 status.less 對(duì)應(yīng)的顏色變量而無(wú)需修改組件代碼。綜上nzStatus是 ng-zorro-antd 日期選擇器中輕量但完整的校驗(yàn)狀態(tài)入口一個(gè)Input、兩個(gè)取值、一組確定的 CSS 類名以及與nz-form的自動(dòng)聯(lián)動(dòng)機(jī)制構(gòu)成了從手動(dòng)到表單驅(qū)動(dòng)的兩種落地路徑。贊分享UI組件前端【免費(fèi)下載鏈接】ng-zorro-antdAngular UI Component Library based on Ant Design項(xiàng)目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd點(diǎn)擊查看免費(fèi)下載相關(guān)推薦ng-zorro-antd 中通過(guò) nzStatus 為 Cron Expression 設(shè)置校驗(yàn)狀態(tài)的實(shí)現(xiàn)與原理ng zorro antd 中通過(guò) nzStatus 為 Cron Expression 設(shè)置校驗(yàn)狀態(tài)的實(shí)現(xiàn)與原理 本文基于 ng zorro antd 的 CUI組件前端antd InputNumber status 指南用 status 為數(shù)字輸入框添加 error / warning 校驗(yàn)狀態(tài)antd InputNumber status 指南用 status 為數(shù)字輸入框添加 error / warning 校驗(yàn)狀態(tài) InputNumber 是前端UI組件設(shè)計(jì)系統(tǒng)Ant Design Cascader 組件 status 屬性實(shí)戰(zhàn)指南為級(jí)聯(lián)選擇器添加 error / warning 校驗(yàn)狀態(tài)Ant Design Cascader 組件 status 屬性實(shí)戰(zhàn)指南為級(jí)聯(lián)選擇器添加 error / warning 校驗(yàn)狀態(tài) Cascader級(jí)聯(lián)選擇前端UI組件設(shè)計(jì)系統(tǒng)上一篇AI短視頻自動(dòng)化創(chuàng)作系統(tǒng)SmartVideo Pro深度解析下一篇AngularEditor高級(jí)擴(kuò)展自定義指令與插件開發(fā)實(shí)戰(zhàn)創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 ng-zorro-antd DatePicker 狀態(tài)樣式實(shí)戰(zhàn)：使用 nzStatus 為日期選擇器添加 error 與 warning 校驗(yàn)狀態(tài)
UI組件前端【免費(fèi)下載鏈接】ng-zorro-antdAngular UI Component Library based on Ant Design項(xiàng)目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd點(diǎn)擊查看免費(fèi)下載在 ng-zorro-antd基于 Ant Design 的 Angular UI 組件庫(kù)中日期選擇器nz-date-picker與范圍選擇器nz-range-picker都支持通過(guò)nzStatus輸入屬性展示表單校驗(yàn)狀態(tài)取值error或warning對(duì)應(yīng)呈現(xiàn)紅色或橙色的邊框與聚焦高亮效果。本篇以倉(cāng)庫(kù)內(nèi)官方示例 status.md 及其組件 status.ts 為主體完整講解該 API 的用法、渲染效果來(lái)源并結(jié)合源碼說(shuō)明狀態(tài)類名是如何生成、又如何與nz-form表單狀態(tài)聯(lián)動(dòng)自動(dòng)驅(qū)動(dòng)的幫助你在 Angular 表單中準(zhǔn)確落地日期字段的校驗(yàn)視覺反饋。官方示例nzStatus 的兩種取值官方示例文檔 status.md 的說(shuō)明非常凝練使用nzStatus為 DatePicker 添加狀態(tài)可選error或者warning。對(duì)應(yīng)的演示組件 status.ts 在垂直排布的nz-space中同時(shí)展示了單選與范圍兩種日期選擇器、兩種狀態(tài)共 4 個(gè)用例可直接復(fù)制到工程中運(yùn)行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 {}從示例可以看到幾個(gè)要點(diǎn)nzStatus是靜態(tài)字符串屬性即可生效如nzStatuserror也可以像測(cè)試用例 date-picker.component.spec.ts 中那樣通過(guò)[nzStatus]status()綁定動(dòng)態(tài)值nz-range-picker同樣繼承該能力整個(gè)范圍輸入框兩個(gè)日期框與中間的分隔符會(huì)統(tǒng)一呈現(xiàn)狀態(tài)色不設(shè)置nzStatus默認(rèn)值時(shí)日期選擇器呈現(xiàn)普通的邊框與 hover/focus 交互樣式。API 層面的參數(shù)定義可以在 doc/index.zh-CN.md 的屬性表中確認(rèn)[nzStatus]用于“設(shè)置校驗(yàn)狀態(tài)”類型為error | warning默認(rèn)值為空即無(wú)狀態(tài)。狀態(tài)值的類型定義NzStatusnzStatus輸入屬性的聲明位于 date-picker.component.tsInput() nzStatus: NzStatus ;其類型NzStatus定義在 components/core/types/status.tsexport type NzStatus | error | warning;即 DatePicker 直接可設(shè)置的狀態(tài)只有三種默認(rèn)無(wú)狀態(tài)、error、warning。需要注意nzStatus的取值范圍比表單控件狀態(tài)類型NzValidateStatus更窄——后者還包含success、validating這兩個(gè)值只能通過(guò)表單聯(lián)動(dòng)間接獲得不能直接寫在nzStatus上。渲染原理nzStatus 如何變成 CSS 類名DatePicker 對(duì)nzStatus的處理集中在兩個(gè)生命周期階段全部位于 date-picker.component.ts初始化階段組件內(nèi)部維護(hù)了statusCls狀態(tài)類映射、status、hasFeedback三個(gè)字段見 L296-L299初始為空對(duì)象與空字符串。變更檢測(cè)階段ngOnChanges中監(jiān)聽nzStatus變化一旦變化就調(diào)用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); } }); }它通過(guò)工具函數(shù) getStatusClassNames 把狀態(tài)值換算為類名映射再用Renderer2在組件根元素上增刪這些類保證狀態(tài)切換例如從error切到warning或清空時(shí)舊類名會(huì)被正確移除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最終會(huì)在nz-date-picker根節(jié)點(diǎn)上加上ant-picker-status-error類nzStatuswarning則加上ant-picker-status-warning類。這些類名對(duì)應(yīng)的視覺樣式在 components/date-picker/style/status.less 中定義通過(guò)picker-status-color混入分別以error-color/warning-color系列變量重寫了日期選擇器的默認(rèn)配色——非禁用狀態(tài)下的邊框色、聚焦-focused/:focus時(shí)的文字色與外發(fā)光色、以及底部激活條-active-bar的背景色。也就是說(shuō)狀態(tài)樣式不僅改變靜態(tài)邊框還完整覆蓋了 hover、focus 與底部高亮條這一組交互態(tài)。與 nz-form 的聯(lián)動(dòng)由表單狀態(tài)自動(dòng)驅(qū)動(dòng)nzStatus并非只能手動(dòng)寫死。在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通過(guò)inject(NzFormStatusService, { optional: true })注入L286只有當(dāng)日期選擇器處于nz-form的校驗(yàn)控制之下時(shí)才有值。這意味著只要日期字段所在的表單項(xiàng)配置了校驗(yàn)error狀態(tài)就會(huì)隨控件狀態(tài)自動(dòng)出現(xiàn)且表單的nzHasFeedback會(huì)額外加上ant-picker-has-feedback類。這一行為在測(cè)試用例 NzTestDatePickerInFormComponent 中可以得到印證——該測(cè)試組件使用ReactiveFormsModuleNzFormModule在nzHasFeedback的nz-form-control中放置formControlName綁定的nz-date-picker用于驗(yàn)證表單狀態(tài)驅(qū)動(dòng)下的樣式表現(xiàn)。實(shí)踐建議手動(dòng)校驗(yàn)場(chǎng)景如果校驗(yàn)邏輯在組件內(nèi)部維護(hù)例如自定義日期合法性判斷直接綁定[nzStatus]myStatus取值限于error | warning無(wú)需再關(guān)心類名。表單校驗(yàn)場(chǎng)景優(yōu)先把日期選擇器放進(jìn)nz-form-itemnz-form-control由響應(yīng)式表單的校驗(yàn)狀態(tài)自動(dòng)驅(qū)動(dòng)此時(shí)手動(dòng)設(shè)置nzStatus與表單狀態(tài)可能相互覆蓋建議二選一以表單聯(lián)動(dòng)為準(zhǔn)。范圍選擇器nz-range-picker復(fù)用同一套NzDatePickerComponent邏輯nzStatus的寫法與效果一致作用在整組輸入上?？啥ㄖ菩杂捎跔顟B(tài)最終體現(xiàn)為ant-picker-status-error/ant-picker-status-warning兩個(gè)類名若品牌色與 Ant Design 默認(rèn)色不同可在主題變量或全局樣式中覆蓋 status.less 對(duì)應(yīng)的顏色變量而無(wú)需修改組件代碼。綜上nzStatus是 ng-zorro-antd 日期選擇器中輕量但完整的校驗(yàn)狀態(tài)入口一個(gè)Input、兩個(gè)取值、一組確定的 CSS 類名以及與nz-form的自動(dòng)聯(lián)動(dòng)機(jī)制構(gòu)成了從手動(dòng)到表單驅(qū)動(dòng)的兩種落地路徑。贊分享UI組件前端【免費(fèi)下載鏈接】ng-zorro-antdAngular UI Component Library based on Ant Design項(xiàng)目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd點(diǎn)擊查看免費(fèi)下載相關(guān)推薦ng-zorro-antd 中通過(guò) nzStatus 為 Cron Expression 設(shè)置校驗(yàn)狀態(tài)的實(shí)現(xiàn)與原理ng zorro antd 中通過(guò) nzStatus 為 Cron Expression 設(shè)置校驗(yàn)狀態(tài)的實(shí)現(xiàn)與原理 本文基于 ng zorro antd 的 CUI組件前端antd InputNumber status 指南用 status 為數(shù)字輸入框添加 error / warning 校驗(yàn)狀態(tài)antd InputNumber status 指南用 status 為數(shù)字輸入框添加 error / warning 校驗(yàn)狀態(tài) InputNumber 是前端UI組件設(shè)計(jì)系統(tǒng)Ant Design Cascader 組件 status 屬性實(shí)戰(zhàn)指南為級(jí)聯(lián)選擇器添加 error / warning 校驗(yàn)狀態(tài)Ant Design Cascader 組件 status 屬性實(shí)戰(zhàn)指南為級(jí)聯(lián)選擇器添加 error / warning 校驗(yàn)狀態(tài) Cascader級(jí)聯(lián)選擇前端UI組件設(shè)計(jì)系統(tǒng)上一篇AI短視頻自動(dòng)化創(chuàng)作系統(tǒng)SmartVideo Pro深度解析下一篇AngularEditor高級(jí)擴(kuò)展自定義指令與插件開發(fā)實(shí)戰(zhàn)創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考