Angular中点击按钮移除表单值后如何消除按钮active状态

按钮active状态和表单值不同步的核心原因是Bootstrap原生JS逻辑和Angular绑定逻辑冲突：

• 按钮组父容器上的data-toggle="buttons"是Bootstrap原生按钮组件的触发标识，Bootstrap全局JS会监听该容器下所有按钮的点击事件，自行给按钮添加/移除active类
• 你写的[ngClass]绑定是由Angular根据FormArray的值控制active类，两边同时操作同一个DOM的类属性，就会出现值已经从FormArray中移除，但Bootstrap JS强行给按钮加上active类的不同步问题
• 初始加载表现正常是因为首次渲染时还没触发点击事件，Bootstrap JS没有介入，Angular的绑定逻辑正常生效

1. 移除冲突的Bootstrap原生属性 #

直接删掉按钮组父容器上的data-toggle="buttons"属性，禁止Bootstrap原生JS插手按钮状态控制，所有状态完全交给Angular管理，修改后的容器代码：

<div class="btn-group-toggle mr-2 p-4">
  <button
    *ngFor="let day of frequencyDays; let i = index"
    class="btn btn-primary mr-2"
    name="day_{{ i }}"
    [value]="day.id"
    type="button"
    (click)="onChangeCheckbox(day.id)"
    [ngClass]="{ active: checked(day.id) }"
    autocomplete="off"
  >
    {{ day.name }}
  </button>
</div>

2. （可选优化）简化逻辑减少不必要的计算 #

原代码里的checked方法每次变更检测都会执行，还反复获取FormArray值，可以做如下简化：

• 首先在组件类中添加FormArray的getter，方便模板和方法直接访问：

get frequencyIntervalArr(): FormArray {
  return this.myForm.get('frequencyInterval') as FormArray;
}

• 简化选中状态切换逻辑，直接操作FormArray控件，不需要额外取value查找：

onChangeCheckbox(id: number) {
  const targetIndex = this.frequencyIntervalArr.controls.findIndex(control => control.value === id);
  if (targetIndex > -1) {
    this.frequencyIntervalArr.removeAt(targetIndex);
  } else {
    this.frequencyIntervalArr.push(new FormControl(id));
  }
}

• 可以直接在模板中判断选中状态，不需要单独写checked方法，减少重复执行：

[ngClass]="{ active: frequencyIntervalArr.value.includes(day.id) }"

修改完成后即可实现状态完全同步：初始加载时frequencyInterval的默认值[2,3]会正常给对应按钮添加active类，点击已激活按钮时值从FormArray移除的同时按钮active类同步取消，点击未激活按钮时值加入、active类同步添加，完全符合预期。

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