UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本文围绕 ng-zorro-antdAngular UI 组件库中「受控的 CheckboxControlled Checkbox」这一经典交互模式展开以nz-checkbox的受控用法为核心讲解如何借助 Angular 的signal与ngModel双向绑定让 Checkbox 的选中/禁用状态完全由外部数据源驱动并与其他组件按钮、全选框、表单控件实现联动。读完本文你将掌握受控 Checkbox 的标准写法、底层ControlValueAccessor实现原理以及全选/半选、表单集成等扩展场景的实战方案。什么是受控的 Checkbox在 ng-zorro-antd 中nz-checkbox同时支持「非受控」与「受控」两种使用方式非受控组件自身维护选中状态用户点击后状态由内部直接翻转如 basic.ts 中[(ngModel)]checked加本地signal的最小示例受控Controlled选中值checked与禁用值disabled都来自组件外部的响应式数据源外部数据变化会「推」到 Checkbox 上Checkbox 的交互结果再「回写」到数据源形成闭环联动。官方 demo controller.md 对该场景的描述非常精炼——「联动 checkboxCommunicated with other components」即通过外部状态驱动 Checkbox并让 Checkbox 与按钮等外部组件互相通信。这是表单类组件开发中最常见、也最容易被忽视的模式。受控 Checkbox 完整示例拆解官方演示代码位于 controller.ts完整逻辑如下import { Component, signal } from angular/core; import { FormsModule } from angular/forms; import { NzButtonModule } from ng-zorro-antd/button; import { NzCheckboxModule } from ng-zorro-antd/checkbox; Component({ selector: nz-demo-checkbox-controller, imports: [FormsModule, NzButtonModule, NzCheckboxModule], template: label nz-checkbox [(ngModel)]checked [nzDisabled]disabled() {{ checked() ? Checked : Unchecked }} - {{ disabled() ? Disabled : Enabled }} /label br / br / button nz-button nzTypeprimary (click)toggleChecked() nzSizesmall {{ checked() ? Uncheck : Check }} /button button nz-button nzTypeprimary (click)toggleDisabled() nzSizesmall {{ disabled() ? Enable : Disable }} /button , styles: button { margin-inline-end: 8px; } }) export class NzDemoCheckboxControllerComponent { readonly checked signal(true); readonly disabled signal(false); toggleChecked(): void { this.checked.update(checked !checked); } toggleDisabled(): void { this.disabled.update(disabled !disabled); } }关键点一[(ngModel)]双向绑定受控值label nz-checkbox [(ngModel)]checked是受控的核心写法。checked是组件的唯一数据源外部 → 组件当checked信号变化例如点击按钮调用toggleChecked()ngModel会把新值写入 Checkbox 内部模板上的checked()显示随之刷新组件 → 外部用户点击 Checkbox 时内部会回调ngModel的change把新选中值写回checked模板文本{{ checked() ? Checked : Unchecked }}立即同步变化。因此 label 上的文本、按钮的文字与图标语义都基于同一个信号源任何一方变化都会驱动其余部分刷新——这就是「联动」的本质。关键点二[nzDisabled]受控禁用[nzDisabled]disabled()让禁用状态同样由外部信号驱动。示例中点击「Enable / Disable」按钮会翻转disabled信号Checkbox 立即进入或退出禁用态。受控模式下禁用不再是一个写死的属性而是业务逻辑的输入。关键点三Signal 与模板自动响应示例全部使用 Angularsignalsignal(true)、signal(false)管理状态配合update()做不可变更新。相比传统组件类属性signal 在模板中通过checked()读取天然具备细粒度响应性按钮点击 → 信号更新 → 模板中的 Checkbox 绑定、按钮文案、状态文本一并刷新无需手动触发变更检测。源码级原理NzCheckboxComponent如何实现受控受控能力建立在NzCheckboxComponent对 Angular 表单原语的完整实现之上源码见 checkbox.component.ts。ControlValueAccessor 桥接组件通过NG_VALUE_ACCESSOR将自己注册为表单值访问器checkbox.component.tsproviders: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() NzCheckboxComponent), multi: true } ]这使得ngModel、ReactiveForms的formControl都能直接绑定到该组件。三个关键方法构成了受控的数据通路writeValue(value)checkbox.component.ts外部把选中值写入组件内部同步nzChecked并触发变更检测registerOnChange(fn)与registerOnTouched(fn)checkbox.component.ts注册外部回调供内部把交互结果回传给表单setDisabledState(disabled)checkbox.component.ts接收表单层级的禁用指令与nzDisabled输入合并。点击与状态回写的内部闭环受控模式的内部状态流转集中在setValuecheckbox.component.tsprivate setValue(value: boolean): void { this.nzChecked value; this.onChange(value); this.nzCheckedChange.emit(value); }当用户点击组件时innerCheckedChangecheckbox.component.ts会做两件事先判断nzDisabled含分组finalDisabled决定是否放行再调用setValue翻转状态并触发onChange与nzCheckedChange事件。点击事件本身通过fromEventOutsideAngular监听checkbox.component.ts配合preventDefault与stopPropagation避免 Angular Zone 过度触发变更检测——对应的测试「should not run change detection when the input is clicked」在 checkbox.spec.ts 中有明确验证。受控与禁用的合并逻辑注意setDisabledState中的细节this.nzDisabled (this.isNzDisableFirstChange this.nzDisabled) || disabled;。它在首次变化时优先保留模板上显式设置的nzDisabled之后则以表单指令为准避免两种禁用来源互相覆盖。这也解释了为何受控示例中[nzDisabled]disabled()与按钮联动时行为始终稳定可预期。进阶联动场景全选与半选indeterminate受控模式最经典的实战场景是「全选 / 半选」联动官方示例见 check-all.tslabel nz-checkbox [ngModel]allChecked() (ngModelChange)onAllCheckedChange($event) [nzIndeterminate]indeterminate() Check all /label nz-divider / nz-checkbox-group [nzOptions]options [(ngModel)]value /对应组件逻辑readonly value signalArrayNzCheckboxOption[value]([Apple, Orange]); readonly options: NzCheckboxOption[] [ { label: Apple, value: Apple }, { label: Pear, value: Pear }, { label: Orange, value: Orange } ]; readonly allChecked computed(() this.value().length this.options.length); readonly indeterminate computed(() this.value().length 0 !this.allChecked()); onAllCheckedChange(checked: boolean): void { this.value.set(checked ? this.options.map(item item.value) : []); }这个场景充分展示了受控模式的「派生状态」思路全选框是纯受控组件它使用单向[ngModel]allChecked()(ngModelChange)回调选中与否完全由value派生computed不维护自己的独立状态半选态nzIndeterminate仅负责样式控制如 index.zh-CN.md 的 API 表所述默认false这里由「部分选中且未全选」这一条件推导分组联动nz-checkbox-group的[(ngModel)]value维护整个选项集合点全选时一次性写入全部值点取消时清空数组。其底层实现见 checkbox-group.component.tsonCheckedChange通过value.update做数组的增删再触发onChange回写。受控 Checkbox 与表单集成受控模式天然兼容 Angular 的两套表单体系模板表单ngModel[(ngModel)]双向绑定即模板表单用法Controller demo 与 Check All demo 均属此类。使用前需在组件中导入FormsModule与NzCheckboxModule示例的imports数组已展示。响应式表单Reactive Formsnz-checkbox同样可以作为FormControl的宿主。测试代码 checkbox.spec.ts 展示了标准写法Component({ imports: [ReactiveFormsModule, NzCheckboxModule], template: form label nz-checkbox [formControl]formControl [nzDisabled]disabled/label /form }) export class NzTestCheckboxFormComponent { formControl new FormControl(false); disabled false; }相关的表单行为在 checkbox.spec.ts 中有完整测试覆盖初始状态为pristine、untouched、valid且可交互formControl.disable()后input 的disabled属性与ant-checkbox-disabled样式类同步生效且点击不再改变表单值重新enable()后恢复交互点击可正常翻转FormControl的值。这证明了受控 Checkbox 与表单状态机dirty/pristine/touched/disabled完全打通适合直接嵌入 Angular 表单体系。测试验证受控行为的可靠保障checkbox.spec.ts 用 Vitest 编写了完整的行为测试可作为受控场景的正确性参照点击翻转checkbox.spec.ts点击组件后checked()由false变true且modelChange回调恰好触发一次禁用拦截checkbox.spec.tsdisabled为true时点击不产生任何状态变化与回调半选样式checkbox.spec.tsnzIndeterminate为true时挂载ant-checkbox-indeterminate类且与checked共存时样式优先级正确模板中[class.ant-checkbox-checked]nzChecked !nzIndeterminate焦点控制checkbox.spec.tsfocus()与blur()方法可直接操作内部 input 的焦点nzAutoFocus会在ngAfterViewInit自动聚焦checkbox.component.ts。这些测试既是对库自身行为的约束也恰好定义了「受控」交互的边界状态只应由外部数据源改变组件的内部点击仅是向数据源提交变更的通道。小结受控 Checkbox 的最佳实践从官方「联动 checkbox」demo 出发可以总结出在 ng-zorro-antd 中使用受控 Checkbox 的要点单一数据源选中值与禁用值都用signal或computed派生状态管理通过[(ngModel)]/[formControl]与组件绑定避免组件内部残留独立状态显式受控需要外部联动时优先使用双向绑定或单向绑定 ngModelChange回调全选/半选场景用nzIndeterminate表达中间态联动而非直改 DOM通过修改数据源驱动界面刷新按钮、文本、Checkbox 自动保持同步这正是 controller.ts 示范的核心思想利用表单集成能力受控 Checkbox 完整实现ControlValueAccessor可直接嵌入模板表单或响应式表单禁用状态支持nzDisabled与表单指令的双通道合并。需要继续深入时可阅读组件 API 文档 index.zh-CN.md含nz-checkbox与nz-checkbox-group的完整参数表、组件实现 checkbox.component.ts 与 checkbox-group.component.ts以及行为测试 checkbox.spec.ts。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐Terragrunt 实战指南用编排工具管理大规模 Terraform 项目Terragrunt 实战指南用编排工具管理大规模 Terraform 项目 Terragrunt 是一款开源的基础设施即代码编排工具套在 TerraforCLIDevOps云原生ng-zorro-antd Checkbox 禁用机制解析nzDisabled、表单联动与 CSS 降级实现ng zorro antd Checkbox 禁用机制解析nzDisabled、表单联动与 CSS 降级实现 本文以 ng zorro antd 中 ChecUI组件前端从源码到部署CrowdStrike CRT内部工作原理与自定义扩展终极指南从源码到部署CrowdStrike CRT内部工作原理与自定义扩展终极指南 CrowdStrike CRTCrowdStrike Reporting Too上一篇GLM-5.2-MXFP4模型评估完全指南从GSM8K到实际应用场景下一篇Quokka CMS终极入门教程从零开始构建你的第一个CMS网站创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ng-zorro-antd 受控 Checkbox 实战：用 Angular Signal 实现组件联动
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本文围绕 ng-zorro-antdAngular UI 组件库中「受控的 CheckboxControlled Checkbox」这一经典交互模式展开以nz-checkbox的受控用法为核心讲解如何借助 Angular 的signal与ngModel双向绑定让 Checkbox 的选中/禁用状态完全由外部数据源驱动并与其他组件按钮、全选框、表单控件实现联动。读完本文你将掌握受控 Checkbox 的标准写法、底层ControlValueAccessor实现原理以及全选/半选、表单集成等扩展场景的实战方案。什么是受控的 Checkbox在 ng-zorro-antd 中nz-checkbox同时支持「非受控」与「受控」两种使用方式非受控组件自身维护选中状态用户点击后状态由内部直接翻转如 basic.ts 中[(ngModel)]checked加本地signal的最小示例受控Controlled选中值checked与禁用值disabled都来自组件外部的响应式数据源外部数据变化会「推」到 Checkbox 上Checkbox 的交互结果再「回写」到数据源形成闭环联动。官方 demo controller.md 对该场景的描述非常精炼——「联动 checkboxCommunicated with other components」即通过外部状态驱动 Checkbox并让 Checkbox 与按钮等外部组件互相通信。这是表单类组件开发中最常见、也最容易被忽视的模式。受控 Checkbox 完整示例拆解官方演示代码位于 controller.ts完整逻辑如下import { Component, signal } from angular/core; import { FormsModule } from angular/forms; import { NzButtonModule } from ng-zorro-antd/button; import { NzCheckboxModule } from ng-zorro-antd/checkbox; Component({ selector: nz-demo-checkbox-controller, imports: [FormsModule, NzButtonModule, NzCheckboxModule], template: label nz-checkbox [(ngModel)]checked [nzDisabled]disabled() {{ checked() ? Checked : Unchecked }} - {{ disabled() ? Disabled : Enabled }} /label br / br / button nz-button nzTypeprimary (click)toggleChecked() nzSizesmall {{ checked() ? Uncheck : Check }} /button button nz-button nzTypeprimary (click)toggleDisabled() nzSizesmall {{ disabled() ? Enable : Disable }} /button , styles: button { margin-inline-end: 8px; } }) export class NzDemoCheckboxControllerComponent { readonly checked signal(true); readonly disabled signal(false); toggleChecked(): void { this.checked.update(checked !checked); } toggleDisabled(): void { this.disabled.update(disabled !disabled); } }关键点一[(ngModel)]双向绑定受控值label nz-checkbox [(ngModel)]checked是受控的核心写法。checked是组件的唯一数据源外部 → 组件当checked信号变化例如点击按钮调用toggleChecked()ngModel会把新值写入 Checkbox 内部模板上的checked()显示随之刷新组件 → 外部用户点击 Checkbox 时内部会回调ngModel的change把新选中值写回checked模板文本{{ checked() ? Checked : Unchecked }}立即同步变化。因此 label 上的文本、按钮的文字与图标语义都基于同一个信号源任何一方变化都会驱动其余部分刷新——这就是「联动」的本质。关键点二[nzDisabled]受控禁用[nzDisabled]disabled()让禁用状态同样由外部信号驱动。示例中点击「Enable / Disable」按钮会翻转disabled信号Checkbox 立即进入或退出禁用态。受控模式下禁用不再是一个写死的属性而是业务逻辑的输入。关键点三Signal 与模板自动响应示例全部使用 Angularsignalsignal(true)、signal(false)管理状态配合update()做不可变更新。相比传统组件类属性signal 在模板中通过checked()读取天然具备细粒度响应性按钮点击 → 信号更新 → 模板中的 Checkbox 绑定、按钮文案、状态文本一并刷新无需手动触发变更检测。源码级原理NzCheckboxComponent如何实现受控受控能力建立在NzCheckboxComponent对 Angular 表单原语的完整实现之上源码见 checkbox.component.ts。ControlValueAccessor 桥接组件通过NG_VALUE_ACCESSOR将自己注册为表单值访问器checkbox.component.tsproviders: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() NzCheckboxComponent), multi: true } ]这使得ngModel、ReactiveForms的formControl都能直接绑定到该组件。三个关键方法构成了受控的数据通路writeValue(value)checkbox.component.ts外部把选中值写入组件内部同步nzChecked并触发变更检测registerOnChange(fn)与registerOnTouched(fn)checkbox.component.ts注册外部回调供内部把交互结果回传给表单setDisabledState(disabled)checkbox.component.ts接收表单层级的禁用指令与nzDisabled输入合并。点击与状态回写的内部闭环受控模式的内部状态流转集中在setValuecheckbox.component.tsprivate setValue(value: boolean): void { this.nzChecked value; this.onChange(value); this.nzCheckedChange.emit(value); }当用户点击组件时innerCheckedChangecheckbox.component.ts会做两件事先判断nzDisabled含分组finalDisabled决定是否放行再调用setValue翻转状态并触发onChange与nzCheckedChange事件。点击事件本身通过fromEventOutsideAngular监听checkbox.component.ts配合preventDefault与stopPropagation避免 Angular Zone 过度触发变更检测——对应的测试「should not run change detection when the input is clicked」在 checkbox.spec.ts 中有明确验证。受控与禁用的合并逻辑注意setDisabledState中的细节this.nzDisabled (this.isNzDisableFirstChange this.nzDisabled) || disabled;。它在首次变化时优先保留模板上显式设置的nzDisabled之后则以表单指令为准避免两种禁用来源互相覆盖。这也解释了为何受控示例中[nzDisabled]disabled()与按钮联动时行为始终稳定可预期。进阶联动场景全选与半选indeterminate受控模式最经典的实战场景是「全选 / 半选」联动官方示例见 check-all.tslabel nz-checkbox [ngModel]allChecked() (ngModelChange)onAllCheckedChange($event) [nzIndeterminate]indeterminate() Check all /label nz-divider / nz-checkbox-group [nzOptions]options [(ngModel)]value /对应组件逻辑readonly value signalArrayNzCheckboxOption[value]([Apple, Orange]); readonly options: NzCheckboxOption[] [ { label: Apple, value: Apple }, { label: Pear, value: Pear }, { label: Orange, value: Orange } ]; readonly allChecked computed(() this.value().length this.options.length); readonly indeterminate computed(() this.value().length 0 !this.allChecked()); onAllCheckedChange(checked: boolean): void { this.value.set(checked ? this.options.map(item item.value) : []); }这个场景充分展示了受控模式的「派生状态」思路全选框是纯受控组件它使用单向[ngModel]allChecked()(ngModelChange)回调选中与否完全由value派生computed不维护自己的独立状态半选态nzIndeterminate仅负责样式控制如 index.zh-CN.md 的 API 表所述默认false这里由「部分选中且未全选」这一条件推导分组联动nz-checkbox-group的[(ngModel)]value维护整个选项集合点全选时一次性写入全部值点取消时清空数组。其底层实现见 checkbox-group.component.tsonCheckedChange通过value.update做数组的增删再触发onChange回写。受控 Checkbox 与表单集成受控模式天然兼容 Angular 的两套表单体系模板表单ngModel[(ngModel)]双向绑定即模板表单用法Controller demo 与 Check All demo 均属此类。使用前需在组件中导入FormsModule与NzCheckboxModule示例的imports数组已展示。响应式表单Reactive Formsnz-checkbox同样可以作为FormControl的宿主。测试代码 checkbox.spec.ts 展示了标准写法Component({ imports: [ReactiveFormsModule, NzCheckboxModule], template: form label nz-checkbox [formControl]formControl [nzDisabled]disabled/label /form }) export class NzTestCheckboxFormComponent { formControl new FormControl(false); disabled false; }相关的表单行为在 checkbox.spec.ts 中有完整测试覆盖初始状态为pristine、untouched、valid且可交互formControl.disable()后input 的disabled属性与ant-checkbox-disabled样式类同步生效且点击不再改变表单值重新enable()后恢复交互点击可正常翻转FormControl的值。这证明了受控 Checkbox 与表单状态机dirty/pristine/touched/disabled完全打通适合直接嵌入 Angular 表单体系。测试验证受控行为的可靠保障checkbox.spec.ts 用 Vitest 编写了完整的行为测试可作为受控场景的正确性参照点击翻转checkbox.spec.ts点击组件后checked()由false变true且modelChange回调恰好触发一次禁用拦截checkbox.spec.tsdisabled为true时点击不产生任何状态变化与回调半选样式checkbox.spec.tsnzIndeterminate为true时挂载ant-checkbox-indeterminate类且与checked共存时样式优先级正确模板中[class.ant-checkbox-checked]nzChecked !nzIndeterminate焦点控制checkbox.spec.tsfocus()与blur()方法可直接操作内部 input 的焦点nzAutoFocus会在ngAfterViewInit自动聚焦checkbox.component.ts。这些测试既是对库自身行为的约束也恰好定义了「受控」交互的边界状态只应由外部数据源改变组件的内部点击仅是向数据源提交变更的通道。小结受控 Checkbox 的最佳实践从官方「联动 checkbox」demo 出发可以总结出在 ng-zorro-antd 中使用受控 Checkbox 的要点单一数据源选中值与禁用值都用signal或computed派生状态管理通过[(ngModel)]/[formControl]与组件绑定避免组件内部残留独立状态显式受控需要外部联动时优先使用双向绑定或单向绑定 ngModelChange回调全选/半选场景用nzIndeterminate表达中间态联动而非直改 DOM通过修改数据源驱动界面刷新按钮、文本、Checkbox 自动保持同步这正是 controller.ts 示范的核心思想利用表单集成能力受控 Checkbox 完整实现ControlValueAccessor可直接嵌入模板表单或响应式表单禁用状态支持nzDisabled与表单指令的双通道合并。需要继续深入时可阅读组件 API 文档 index.zh-CN.md含nz-checkbox与nz-checkbox-group的完整参数表、组件实现 checkbox.component.ts 与 checkbox-group.component.ts以及行为测试 checkbox.spec.ts。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐Terragrunt 实战指南用编排工具管理大规模 Terraform 项目Terragrunt 实战指南用编排工具管理大规模 Terraform 项目 Terragrunt 是一款开源的基础设施即代码编排工具套在 TerraforCLIDevOps云原生ng-zorro-antd Checkbox 禁用机制解析nzDisabled、表单联动与 CSS 降级实现ng zorro antd Checkbox 禁用机制解析nzDisabled、表单联动与 CSS 降级实现 本文以 ng zorro antd 中 ChecUI组件前端从源码到部署CrowdStrike CRT内部工作原理与自定义扩展终极指南从源码到部署CrowdStrike CRT内部工作原理与自定义扩展终极指南 CrowdStrike CRTCrowdStrike Reporting Too上一篇GLM-5.2-MXFP4模型评估完全指南从GSM8K到实际应用场景下一篇Quokka CMS终极入门教程从零开始构建你的第一个CMS网站创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考