Angular自定义FormGroup禁用指令失效问题如何解决？

• 核心是Angular表单相关指令的初始化执行顺序问题：你在ngOnInit中执行禁用操作时，FormGroup和模板[formGroup]指令的绑定流程还未完全完成，后续Angular内部的表单状态同步逻辑会覆盖你提前设置的DISABLED状态，导致表单回到可用状态。
• 业务代码中如果存在表单嵌套、动态添加控件、异步给formGroup赋值等逻辑，会放大这个执行顺序的差异，所以最简示例没有复现，业务代码会出问题。
• 你改为ngAfterViewInit后生效，是因为这个生命周期执行时，表单的初始化绑定流程已经走完，状态不会再被Angular内部逻辑覆盖。

方案1：优化现有指令，兼容执行顺序（推荐） #

修改指令逻辑，将禁用操作放到微任务队列执行，同时兼容动态修改禁用条件的场景，避免生命周期依赖问题：

import { Directive, Input, OnInit } from "@angular/core";
import { ControlContainer } from "@angular/forms";

@Directive({
  selector: "[formGroup][disabledGroup]",
})
export class DisabledGroupDirective implements OnInit {
  @Input() set disabledGroup(condition: boolean) {
    this.disabled = condition;
    // 只要表单控件实例存在就执行切换，放到微任务避免被Angular初始化逻辑冲掉状态
    if (this.controlContainer.control) {
      Promise.resolve().then(() => this.toggleGroup(condition));
    }
  }

  disabled: boolean;

  constructor(private readonly controlContainer: ControlContainer) {}

  ngOnInit() {
    // 初始化兜底，避免初始化时输入值已经确定的场景漏执行
    if (this.disabled !== undefined && this.controlContainer.control) {
      Promise.resolve().then(() => this.toggleGroup(this.disabled));
    }
  }

  toggleGroup(condition: boolean) {
    const action = condition ? "disable" : "enable";
    // 可选参数：emitEvent设为false可以避免禁用/启用时触发不必要的valueChanges/statusChanges
    this.controlContainer.control[action]({ emitEvent: false });
  }
}

这个方案的优势：

• 不依赖特定生命周期，适配动态修改禁用条件、嵌套表单、动态添加控件等所有场景
• 不会出现ExpressionChangedAfterItHasBeenCheckedError报错
• 和你原来的使用方式完全兼容，不需要修改模板代码

方案2：继续使用ngAfterViewInit #

如果你的场景中禁用条件不会动态修改，也可以继续使用ngAfterViewInit的写法，只需要补充逻辑处理后续动态修改禁用条件的场景即可：

ngAfterViewInit() {
  this.toggleGroup(this.disabled);
}

如果出现表达式变更报错，可以在切换状态后手动调用变更检测，或者包裹setTimeout(() => this.toggleGroup(this.disabled), 0)即可。

• 可以在指令里增加对formGroupName的支持，适配嵌套FormGroup的场景，只需要修改selector为selector: "[formGroup][disabledGroup], [formGroupName][disabledGroup]"即可。
• 如果需要支持FormArray，同理可以扩展selector适配formArrayName。

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