Angular中Checkbox通过ControlValueAccessor绑定父表单失效问题

将带标签的表单输入封装为独立组件后，text和number类型输入可正常更新父表单，但checkbox类型无法同步true/false值，相关代码如下：

父组件使用代码 #

<tr app-table-checkbox [label]="'AuthEnabled'" [formControl]="RestForm.controls['AuthEnabled']" [id]="'cb1'" [type]="'checkbox'"></tr>

Checkbox组件HTML #

<th><label class="required">{{ label }}</label></th><th><input type="{{ type }}" class="fullwidth" id="{{ id }}" [formControl]="ngControl.control" required /><label for="{{ id }}">True or False</label></th>

组件TS代码 #

export class TableCheckboxComponent implements ControlValueAccessor { 
  @Input() label: string; 
  @Input() type = 'text'; 
  @Input() id: string; 
  constructor(@Self() public ngControl: NgControl) { 
    ngControl.valueAccessor = this; 
  } 
  writeValue(obj: any): void {} 
  registerOnChange(fn: any): void {} 
  registerOnTouched(fn: any): void {} 
}

问题原因 #

1. ControlValueAccessor空实现：你实现的ControlValueAccessor方法都是空函数，没有处理checkbox的状态同步——既没有把父表单的值同步到组件内的checkbox，也没有在checkbox状态变化时通知父表单更新。
2. 表单绑定冲突：模板中直接给input绑定了[formControl]="ngControl.control"，这和你通过ControlValueAccessor实现的自定义值访问逻辑冲突，导致双向同步失效。

解决方案 #

1. 修改组件HTML，移除[formControl]绑定，改用原生checked属性和change事件处理状态：

<th><label class="required">{{ label }}</label></th>
<th>
  <input 
    type="{{ type }}" 
    class="fullwidth" 
    id="{{ id }}" 
    [checked]="currentValue"
    (change)="handleChange($event.target.checked)"
    required 
  />
  <label for="{{ id }}">True or False</label>
</th>

2. 完善ControlValueAccessor的实现，处理值的读写和回调通知：

export class TableCheckboxComponent implements ControlValueAccessor { 
  @Input() label: string; 
  @Input() type = 'text'; 
  @Input() id: string; 
  currentValue: boolean = false;
  private onChangeCallback: (value: any) => void = () => {};
  private onTouchedCallback: () => void = () => {};

  constructor(@Self() public ngControl: NgControl) { 
    ngControl.valueAccessor = this; 
  } 

  // 接收父表单的值，同步到组件内checkbox
  writeValue(obj: any): void {
    this.currentValue = !!obj;
  } 

  // 保存父表单的变更回调
  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  } 

  // 保存父表单的触摸回调
  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  } 

  // checkbox状态变化时通知父表单
  handleChange(value: boolean) {
    this.currentValue = value;
    this.onChangeCallback(value);
    this.onTouchedCallback();
  }
}

3. 确保父组件中AuthEnabled表单控件初始化时设置了正确的布尔类型初始值（如false或true）。

内容的提问来源于stack exchange，提问作者Daan Brouwer