Angular19：基于新输入API实现ControlValueAccessor的setDisabledState

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

...

}

## text-input.component.html
```html
<input
  class="{{ cn( 'rounded focus:outline-primary-400 focus:outline border px-3
    bg-background-400 py-1 leading-tight', tw() ) }}"
  [type]="type()"
  [(ngModel)]="value"
  [disabled]="disabled"
  (blur)="onTouch()"
/>

用户尝试修改后的代码：

export class TextInputComponent implements ControlValueAccessor {
  ...

  private _disabled = false;
  

  get disabled() {
    return this._disabled;
  }

  set disabled(value: boolean) {
    this._disabled = value;
  }
  
  ...

  setDisabledState?(isDisabled: boolean): void {
    this._disabled = isDisabled;
  }

  ...
}

1. 新输入API的核心规则 #

Angular新输入API明确要求：被标记为@Input()的属性，组件内部不能直接修改其值——你的迁移被跳过，就是因为违反了这条规则（setDisabledState直接修改了@Input() disabled）。

2. 正确实现方式：分离外部输入与内部状态 #

要同时支持外部[disabled]绑定和表单控件的setDisabledState同步，需要把状态拆分为两个来源，再合并计算最终状态：

最终代码示例

export class TextInputComponent implements ControlValueAccessor {
  private ngControl = inject(NgControl, { self: true, optional: true });

  // 接收外部传入的disabled值
  @Input() set disabled(externalDisabled: boolean | undefined) {
    this._externalDisabled = externalDisabled;
    this._syncDisabledState();
  }
  // 对外暴露合并后的最终禁用状态
  get disabled(): boolean {
    return this._computedDisabled;
  }

  // 存储外部输入的禁用状态
  private _externalDisabled?: boolean;
  // 存储表单控件通过setDisabledState设置的状态
  private _controlDisabled = false;
  // 最终计算出的禁用状态
  private _computedDisabled = false;

  // 响应表单控件的禁用状态变更
  setDisabledState(isDisabled: boolean): void {
    this._controlDisabled = isDisabled;
    this._syncDisabledState();
  }

  // 合并两个来源的状态，计算最终禁用值
  private _syncDisabledState(): void {
    // 优先使用外部传入的disabled值，无外部值时使用控件状态
    this._computedDisabled = this._externalDisabled ?? this._controlDisabled;
  }

  // ...其他ControlValueAccessor必要实现（writeValue、registerOnChange等）
}

关键细节说明

• 分离状态源：把外部输入和控件内部的禁用状态分开存储，避免直接修改@Input()属性
• 合并计算：通过_syncDisabledState方法统一计算最终状态，确保外部绑定和控件状态变更都能生效
• 符合API要求：@Input()的setter仅负责接收外部值，不直接修改最终状态，完全符合新输入API的规则

3. 模板无需修改 #

模板中依然保持[disabled]="disabled"的绑定即可，因为disabled getter返回的是合并后的最终状态：

<input
  class="{{ cn( 'rounded focus:outline-primary-400 focus:outline border px-3
    bg-background-400 py-1 leading-tight', tw() ) }}"
  [type]="type()"
  [(ngModel)]="value"
  [disabled]="disabled"
  (blur)="onTouch()"
/>

4. 对你尝试代码的补充 #

你改用getter/setter包裹私有变量的思路是正确的，但缺少了外部输入的处理逻辑——如果外部需要通过[disabled]="xxx"绑定值，你的代码无法接收这个输入，因此需要补充@Input()的setter来处理外部传入的值，再合并状态。

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