如何通过代码禁用Angular响应式表单中的mat-button-toggle

你当前代码的核心问题是：你为每个<mat-button-toggle>单独声明了FormControl（pInsertOption、pDeleteOption等），但这些控件并没有在模板中与对应的toggle组件绑定——模板里只有<mat-button-toggle-group>绑定了pOptions这个FormControl。所以你通过this.pForm.get('pInsertOption').disable()操作的是一个未关联到UI的控件，自然不会影响到toggle的状态。

要程序化禁用/启用单个<mat-button-toggle>，可以通过**属性绑定[disabled]**结合表单值的变化来实现，无需额外创建独立的FormControl。以下是两种可行的实现方式：

方式一：直接绑定disabled属性到表单值状态 #

这种方式无需手动订阅值变化，直接在模板中判断表单状态，代码更简洁。

修改后的HTML代码 #

<form [formGroup]="pForm" (ngSubmit)="onSubmit()">
  <!-- 补充pName输入框示例 -->
  <input formControlName="pName" placeholder="输入名称">

  <mat-button-toggle-group formControlName="pOptions" aria-label="P Options">
    <mat-button-toggle id="pInsertOption" value="insert" [disabled]="pForm.get('pName').value !== ''">
      Insert
    </mat-button-toggle>
    <mat-button-toggle id="pDeleteOption" value="delete">
      Delete
    </mat-button-toggle>
    <mat-button-toggle id="pReplaceOption" value="replace">
      Replace
    </mat-button-toggle>
  </mat-button-toggle-group>
</form>

简化后的TS代码 #

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { OnInit } from '@angular/core';

export class PComponent implements OnInit {
  pForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.pForm = this.fb.group({
      pName: ['', [Validators.required]],
      pOptions: ['insert']
    });
  }
}

方式二：通过valueChanges订阅控制状态（适用于复杂逻辑） #

如果需要在TS中处理更复杂的禁用规则，可以通过订阅表单值变化，用组件属性控制toggle状态：

TS代码 #

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { OnInit } from '@angular/core';

export class PComponent implements OnInit {
  pForm: FormGroup;
  isInsertDisabled = false;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.pForm = this.fb.group({
      pName: ['', [Validators.required]],
      pOptions: ['insert']
    });

    // 订阅pName值变化，控制禁用状态
    this.pForm.get('pName').valueChanges.subscribe(val => {
      this.isInsertDisabled = val !== '';
    });
  }
}

HTML代码 #

<form [formGroup]="pForm" (ngSubmit)="onSubmit()">
  <input formControlName="pName" placeholder="输入名称">

  <mat-button-toggle-group formControlName="pOptions" aria-label="P Options">
    <mat-button-toggle id="pInsertOption" value="insert" [disabled]="isInsertDisabled">
      Insert
    </mat-button-toggle>
    <mat-button-toggle id="pDeleteOption" value="delete">
      Delete
    </mat-button-toggle>
    <mat-button-toggle id="pReplaceOption" value="replace">
      Replace
    </mat-button-toggle>
  </mat-button-toggle-group>
</form>

• <mat-button-toggle-group>是一个整体的表单控件，它的formControlName绑定的是选中的toggle的value，单个toggle不需要单独绑定FormControl。
• 禁用单个toggle必须通过[disabled]属性来控制，操作独立的未关联UI的FormControl不会生效。

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