Angular中data-toggle="buttons"失效 事件传值与表单提交异常

问题出在你引入的原生Bootstrap JS库对data-toggle="buttons"的实现逻辑和Angular的运行机制冲突：
Bootstrap 4的buttons组件初始化时，会给容器下所有带.btn类的元素绑定原生点击事件，拦截默认的input change事件、表单submit事件的冒泡和默认行为，自行操作DOM切换checkbox选中状态、给label加选中样式，这个过程完全绕过了Angular Zone.js的变更检测机制，直接导致两个异常：

• 你绑定在checkbox上的(change)事件触发时，Bootstrap还没完成对checkbox checked属性的修改，拿到的值永远是旧的，甚至事件会被直接阻止冒泡导致回调不执行
• 你把整个form放在了带data-toggle="buttons"的容器内部，Bootstrap的事件拦截逻辑会作用到内部的submit按钮上，阻止表单原生submit事件触发，直接导致(ngSubmit)绑定的回调无法执行

当你移除data-toggle="buttons"属性时，Bootstrap JS不会接管这块DOM的事件逻辑，Angular的事件、表单绑定自然恢复正常，但因为没有了JS自动给label加active类，按钮选中样式就失效了。

Bootstrap的按钮组选中样式完全是靠.active类实现的，根本不需要依赖Bootstrap的JS交互逻辑，直接用Angular的动态类绑定实现样式切换即可，从根源上规避原生DOM操作和Angular的冲突：

• 移除容器上的data-toggle="buttons"属性，禁止Bootstrap JS接管这块DOM
• 调整DOM结构，把btn-group容器放到form内部，不要包裹整个form避免影响提交按钮
• 给.btn标签动态绑定active类，选中状态和表单值同步即可

修改后的模板代码：

<form [formGroup]="formCheck" (ngSubmit)="submitFormCheck()" novalidate>
  <!-- 按钮组容器放到form内部，移除data-toggle属性 -->
  <div class="form-check list-inline list-group-horizontal btn-group" role="group">
    <div style="display: inline-block;" *ngFor="let chip of message.multi; let i=index">
      <!-- 动态绑定active类，和表单选中状态同步 -->
      <label class="btn btn-light" [class.active]="checkArray.value.includes(chip.chip)">
        <input 
          type="checkbox" 
          class="form-check list-group-item"  
          [value]="chip.chip"  
          (change)="onCheckboxChange($event)" 
        />
        {{chip.chip}}
      </label>
    </div>
    <button type="submit">Submit</button>
  </div>
</form>

对应的TS代码仅需要新增一个checkArray的getter方便模板访问，其余原有逻辑无需改动：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

// 组件内代码
// 新增getter方便模板直接访问FormArray
get checkArray(): FormArray {
  return this.formCheck.get('checkArray') as FormArray;
}

// 原有表单初始化逻辑不变
this.formCheck = this.formBuilder.group({
  checkArray: this.formBuilder.array([])
})

onCheckboxChange(e) {
  if (e.target.checked) {
    this.checkArray.push(new FormControl(e.target.value));
  } else {
    let i: number = 0;
    this.checkArray.controls.forEach((item: FormControl) => {
      if (item.value == e.target.value) {
        this.checkArray.removeAt(i);
        return;
      }
      i++;
    });
  }
}

submitFormCheck() {
  console.log(this.formCheck.value)
}

这种实现方式和原生Bootstrap按钮组的视觉效果完全一致，同时保留了Angular所有的事件、表单绑定能力，没有兼容隐患。

如果一定要保留data-toggle="buttons"属性，需要做两处适配：

• 把submit按钮移到带data-toggle="buttons"的容器外部，避免被Bootstrap的事件拦截逻辑影响表单提交
• 把checkbox的(change)事件替换为(click)事件，并且用setTimeout或者NgZone.run包裹取值逻辑，等Bootstrap完成DOM修改后再读取选中状态
  这种方案稳定性极差，后续Angular或者Bootstrap版本升级很容易再次出现兼容问题，非极端场景不建议使用。

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