Angular 16+如何在模板中动态禁用/启用响应式表单？

首先明确：Angular 16+ 依然不推荐在 <form> 标签上直接使用 [disabled] 属性——这是原生HTML属性，会绕过响应式表单的状态管理机制，导致表单内部状态（如form.disabled）与UI显示的禁用状态不一致，违背响应式表单“数据驱动”的设计理念。

如果想要尽可能减少额外代码、接近“模板直接实现”的效果，有两种合规方案：

1. 极简TS代码实现（推荐） #

给输入属性isDisabled添加setter，自动同步表单状态，模板无需额外逻辑：

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  template: `
    <form [formGroup]="form">
      <!-- 表单控件内容 -->
    </form>
  `
})
export class YourComponent {
  @Input() form!: FormGroup;
  @Input() set isDisabled(val: boolean) {
    // 传入emitEvent: false避免触发不必要的表单值变更事件
    val ? this.form.disable({ emitEvent: false }) : this.form.enable({ emitEvent: false });
  }
}

模板中只需传入[isDisabled]="yourBooleanValue"，即可自动完成表单的禁用/启用，完全符合响应式表单的规范。

2. 模板逐个控件绑定（无额外TS逻辑，但有局限性） #

如果坚持纯模板写法，可以给每个表单控件单独绑定[disabled]属性，适合控件数量较少的场景：

<form [formGroup]="form">
  <input formControlName="username" [disabled]="isDisabled">
  <input formControlName="password" [disabled]="isDisabled">
  <!-- 其他控件需重复添加[disabled]绑定 -->
</form>

这种方式的缺点很明显：无法一次性控制整个FormGroup，且依然存在“模板状态与表单实例状态不一致”的风险（比如form.disabled返回false，但UI已显示禁用）。

总结：最优方案还是使用setter同步表单状态——仅需几行TS代码，既符合Angular响应式表单的设计规范，又能实现输入属性与表单状态的自动同步，比纯模板写法更可靠、更易维护。

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