Angular：如何在实现ControlValueAccessor的自定义组件内启用禁用表单控件

要在自定义组件内部切换表单控件的禁用状态，核心是通过注入NgControl获取关联的FormControl实例，直接调用其状态切换方法。

实现步骤 #

1. 在自定义组件中注入NgControl，添加@Self()和@Optional()装饰器避免循环引用。
2. 实现ControlValueAccessor的setDisabledState方法，同步组件内部的禁用状态。
3. 添加触发状态切换的逻辑（比如按钮点击事件），通过NgControl获取FormControl后调用enable()或disable()。

完整代码示例 #

custom-input.component.ts

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

@Component({
  selector: 'custom-input',
  template: `
    <input [value]="value" [disabled]="isDisabled" (input)="onInput($event)">
    <button (click)="toggleDisabled()">切换禁用状态</button>
  `,
})
export class CustomInputComponent implements ControlValueAccessor {
  value = '';
  isDisabled = false;

  constructor(
    @Self() @Optional() private ngControl: NgControl
  ) {
    if (this.ngControl) {
      this.ngControl.valueAccessor = this;
    }
  }

  // 切换禁用状态的方法
  toggleDisabled() {
    if (!this.ngControl?.control) return;
    
    this.isDisabled ? this.ngControl.control.enable() : this.ngControl.control.disable();
  }

  // ControlValueAccessor接口实现
  writeValue(value: any): void {
    this.value = value || '';
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

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

  private onChange = (value: any) => {};
  private onTouched = () => {};

  onInput(event: Event) {
    const inputValue = (event.target as HTMLInputElement).value;
    this.value = inputValue;
    this.onChange(inputValue);
    this.onTouched();
  }
}

app.component.ts（保持原有代码不变）

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  form = this.fb.group({
    input: [{ value: 'MyValue', disabled: true }],
  });

  constructor(private fb: FormBuilder) {}
}

app.component.html（保持原有代码不变）

<ng-container [formGroup]="form">
  <custom-input formControlName="input"></custom-input>
</ng-container>

关键说明 #

• 注入NgControl时的@Self()确保只获取当前组件自身的表单控件关联，@Optional()避免组件未关联表单控件时出现错误。
• setDisabledState方法会在FormControl的禁用状态变化时被Angular自动调用，用来更新组件内部的isDisabled状态，保证视图与表单状态同步。
• 调用FormControl.enable()或disable()时，Angular会自动触发表单状态变更通知，同步到组件的setDisabledState方法。

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