Angular响应式表单禁用控件是否自带CSS类/指令？如何设置样式？

Angular会自动为禁用的表单控件添加原生的disabled属性，但不会额外添加专属的CSS类（仅会附带表单状态类如ng-touched、ng-dirty等）。要自定义禁用控件的样式，有几种直接可行的方案：

1. 使用CSS :disabled伪类直接选择 #

这是最简便的方式，直接通过元素的disabled属性来设置样式，适用于原生表单控件或大部分UI组件库的控件。

示例代码（组件内或全局样式）： #

/* 针对原生输入控件 */
input:disabled,
select:disabled,
textarea:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
  border-color: #ddd;
}

/* 针对Angular Material控件（以mat-form-field为例） */
mat-form-field.mat-disabled .mat-input-element {
  background-color: #f5f5f5;
  color: #999;
}

2. 自定义指令添加专属CSS类 #

如果需要更灵活的样式控制（比如统一复用自定义禁用样式），可以写一个指令监听表单控件的禁用状态，动态添加自定义类。

步骤1：创建自定义指令 #

import { Directive, ElementRef, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { FormControl } from '@angular/forms';

@Directive({
  selector: '[appDisabledClass]'
})
export class DisabledClassDirective implements OnInit, OnChanges {
  @Input() appDisabledClass: FormControl;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.toggleClass();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.appDisabledClass) {
      this.toggleClass();
    }
  }

  private toggleClass() {
    const isDisabled = this.appDisabledClass?.disabled;
    this.el.nativeElement.classList.toggle('custom-disabled', isDisabled);
  }
}

步骤2：在模板中使用指令 #

<!-- 绑定响应式表单控件 -->
<input [formControl]="usernameControl" [appDisabledClass]="usernameControl" />

步骤3：添加自定义样式 #

.custom-disabled {
  background-color: #e8e8e8;
  color: #666;
  border: 1px solid #ccc;
  border-radius: 4px;
}

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