如何获取基于ControlValueAccessor的自定义Angular复选框的dirty状态？

要在实现了ControlValueAccessor的自定义复选框组件中获取关联FormControl的dirty状态，核心是通过注入NgControl来拿到绑定的表单控件实例，具体步骤如下：

1. 注入NgControl到组件 #

在组件构造函数中注入NgControl，同时添加@Optional()和@Self()装饰器——前者避免组件未绑定表单控件时出现注入错误，后者确保只获取当前组件自身的NgControl，不会误拿到父组件的：

import { Component, Input, Self, Optional } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';

@Component({
  selector: 'app-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.css']
})
export class CheckboxComponent implements ControlValueAccessor {
  @Input() showDirty: boolean = false;
  value: boolean = false;

  constructor(
    @Optional() @Self() private ngControl: NgControl
  ) { }

  // 这里保留你已实现的ControlValueAccessor接口方法（writeValue、registerOnChange等）
}

2. 实现脏状态的判断逻辑 #

添加一个getter属性，结合showDirty输入参数和NgControl中的控件状态：

get isDirty(): boolean {
  // 先判断showDirty是否开启，再检查关联的FormControl是否处于dirty状态
  return this.showDirty && this.ngControl?.control?.dirty ?? false;
}

3. 在模板中绑定样式类 #

利用isDirty状态给组件添加对应的CSS类，从而调整复选框颜色：

<div class="checkbox-wrapper" [class.dirty]="isDirty">
  <input type="checkbox" [checked]="value" (change)="onChange($event.target.checked)">
  <label>自定义复选框</label>
</div>

4. 添加脏状态的CSS样式 #

在组件样式文件中定义dirty类对应的样式：

.checkbox-wrapper.dirty input[type="checkbox"] {
  border-color: #f57c00; /* 脏状态下的边框颜色 */
}

.checkbox-wrapper.dirty input[type="checkbox"]:checked {
  background-color: #f57c00; /* 选中时的背景色 */
}

为什么之前的方法无效？ #

实现ControlValueAccessor的组件本身只是表单控件的视图实现层，并不持有FormControl实例——FormControl是在父组件中创建并绑定到组件上的。因此直接尝试访问this.dirty或者继承FormControl类都无法拿到正确的状态，必须通过NgControl来获取与当前组件绑定的表单控件实例。

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