Angular布尔值输入自定义表单控件失效问题求助

当checked为false时，模板会同时渲染两个<input type="checkbox">元素且都嵌套在同一个<label>标签内。点击控件区域时，<label>会触发两个输入框的click事件，导致toggle()方法被连续执行两次：第一次把状态从false改为true，第二次又切回false，最终视觉上表现为控件卡顿、状态无法切换。

方案1：简化模板（推荐） #

使用单个checkbox控件绑定状态，通过CSS实现开关样式（这是开关控件的常规实现方式）：

<label class="c-switch" [ngClass]="{ 'toggle-disabled': disabled }">
  <input type="checkbox" [checked]="checked" [disabled]="disabled" (change)="toggle()" />
  <span class="c-switch-handle"></span>
  <label class="c-switch-label">
    <ng-content></ng-content>
  </label>
</label>

这里将click事件替换为change，更贴合表单控件的交互逻辑，同时移除了多余的第二个输入框。

方案2：修复双输入框结构逻辑 #

如果必须保留双输入框结构，需确保同一时间仅渲染一个输入框，给第一个输入框添加*ngIf="checked"：

<label class="c-switch" [ngClass]="{ 'toggle-disabled': disabled }">
  <input type="checkbox" [value]="true" [checked]="checked" [disabled]="disabled" (click)="toggle()" *ngIf="checked" />
  <input
    type="checkbox"
    [value]="false"
    [checked]="checked"
    [disabled]="disabled"
    (click)="toggle()"
    *ngIf="!checked" />
  <span class="c-switch-handle"></span>
  <label class="c-switch-label">
    <ng-content></ng-content>
  </label>
</label>

当前代码中checked setter会在外部赋值时触发onTouched()，不符合表单控件的规范（onTouched()仅应在用户交互时调用），同时writeValue调用setter会触发不必要的onChange，建议调整：

export class ToggleCheckboxComponent implements ControlValueAccessor {
  private _checked = false;
  public get checked(): boolean {
    return !!this._checked;
  }

  @Input() public disabled: boolean;
  @Input()
  public set checked(val: boolean) {
    if (val !== this._checked) {
      this._checked = val;
      this.onChange(val);
    }
  }
  
  private onChange: any = () => {};
  private onTouched: any = () => {};

  public registerOnChange(fn) {
    this.onChange = fn;
  }

  public registerOnTouched(fn) {
    this.onTouched = fn;
  }

  public writeValue(value: boolean) {
    console.log(value);
    this._checked = !!value; // 直接修改私有变量，跳过setter的onChange调用
  }

  public setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  public toggle() {
    this.checked = !this.checked;
    this.onTouched(); // 仅在用户交互时标记控件已触碰
  }
}

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