Angular表单中如何单独禁用某组对应的按钮？

核心解决思路就是别用整个表单的状态，盯紧每个子表单组自己的状态，具体操作如下：

• 先确认你的表单结构：父表单cappingForm下应该包含多个子表单组（对应业务里的不同分组）。
• 针对每组的按钮，直接绑定对应子表单组的dirty状态：
  模板里可以这么写（假设子组名叫group1）：

  <button [disabled]="!cappingForm.get('group1').dirty">保存组1</button>
  <button [disabled]="!cappingForm.get('group1').dirty">隐藏组1</button>
  

• 嫌模板里写太长？可以在组件类里给子表单组加个快捷访问属性，更清爽：
  组件类代码：

  get group1Form(): FormGroup {
    return this.cappingForm.get('group1') as FormGroup;
  }
  

  模板里就能简化成：

  <button [disabled]="!group1Form.dirty">保存组1</button>
  

• 要是想更精准控制（比如用户点过控件但没改内容也不启用按钮），可以结合touched和pristine：

  <button [disabled]="group1Form.pristine || !group1Form.touched">保存组1</button>
  

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